原生js实现仿window10系统日历效果的实例


Posted in Javascript onOctober 31, 2017

舞动的灵魂版js日历,完全采用js实现,故而实现了与语言无关,jsp、asp.net php asp均可使用.无论你是开发软件,还是网站,均是不可或缺的实用代码。

该日历主要实现了获取当前时间时分秒,年月日星期,动态生成选择年的select,月的select,然后根据你所选中的年月,显示该年月对应的这一个月的日期。

点击上一个月,下一个月按钮,在下拉列表中显示对应的年月。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  #calendar {
   position: absolute;
   padding: 5px;
   border: 1px solid #000000;
   background: #8f3349;
   display: none;
  }

  #todayTime {
   padding: 5px 0;
   font-size: 40px;
   color: white;
  }
  #todayDate {
   padding: 5px 0;
   font-size: 24px;
   color: #ffcf88;
  }
  #tools {
   padding: 5px 0;
   height: 30px;
   color: white;
  }
  #tools .l {
   float: left;
  }
  #tools .r {
   float: right;
  }
  table {
   width: 100%;
   color: white;
  }
  table th {
   color: #a2cbf3;
  }
  table td {
   text-align: center;
   cursor: default;
  }
  table td.today {
   background: #cc2951;
   color: white;
  }
 </style>
 <script>
  window.onload = function() {

   var text1 = document.getElementById('text1');

   text1.onfocus = function() {
    calendar();
   }

//   calendar();

   function calendar() {

    var calendarElement = document.getElementById('calendar');
    var todayTimeElement = document.getElementById('todayTime');
    var todayDateElement = document.getElementById('todayDate');
    var selectYearElement = document.getElementById('selectYear');
    var selectMonthElement = document.getElementById('selectMonth');
    var showTableElement = document.getElementById('showTable');
    var prevMonthElement = document.getElementById('prevMonth');
    var nextMonthElement = document.getElementById('nextMonth');

    calendarElement.style.display = 'block';

    /*
     * 获取今天的时间
     * */
    var today = new Date();

    //设置日历显示的年月
    var showYear = today.getFullYear();
    var showMonth = today.getMonth();

     //持续更新当前时间
    updateTime();

    //显示当前的年月日星期
    todayDateElement.innerHTML = getDate(today);

    //动态生成选择年的select
    for (var i=1970; i<2020; i++) {
     var option = document.createElement('option');
     option.value = i;
     option.innerHTML = i;
     if ( i == showYear ) {
      option.selected = true;
     }
     selectYearElement.appendChild(option);
    }
    //动态生成选择月的select
    for (var i=1; i<13; i++) {
     var option = document.createElement('option');
     option.value = i - 1;
     option.innerHTML = i;
     if ( i == showMonth + 1 ) {
      option.selected = true;
     }
     selectMonthElement.appendChild(option);
    }

    //初始化显示table
    showTable();

    //选择年
    selectYearElement.onchange = function() {
     showYear = this.value;
     showTable();
     showOption();
    }

    //选择月
    selectMonthElement.onchange = function() {
     showMonth = Number(this.value);
     showTable();
     showOption();
    }

    //上一个月
    prevMonthElement.onclick = function() {
     showMonth--;
     showTable();
     showOption();
    }

    //下一个月
    nextMonthElement.onclick = function() {
     showMonth++;
     showTable();
     showOption();
    }


    /*
    * 实时更新当前时间
    * */
    function updateTime() {
     var timer = null;
     //每个500毫秒获取当前的时间,并把当前的时间格式化显示到指定位置
     var today = new Date();
     todayTimeElement.innerHTML = getTime(today);
     timer = setInterval(function() {
      var today = new Date();
      todayTimeElement.innerHTML = getTime(today);
     }, 500);
    }

    function showTable() {
     showTableElement.tBodies[0].innerHTML = '';
     //根据当前需要显示的年和月来创建日历
     //创建一个要显示的年月的下一个的日期对象
     var date1 = new Date(showYear, showMonth+1, 1, 0, 0, 0);
     //对下一个月的1号0时0分0秒的时间 - 1得到要显示的年月的最后一天的时间
     var date2 = new Date(date1.getTime() - 1);
     //得到要显示的年月的总天数
     var showMonthDays = date2.getDate();
     //获取要显示的年月的1日的星期,从0开始的星期
     date2.setDate(1);
     //showMonthWeek表示这个月的1日的星期,也可以作为表格中前面空白的单元格的个数
     var showMonthWeek = date2.getDay();

     var cells = 7;
     var rows = Math.ceil( (showMonthDays + showMonthWeek) / cells );

     //通过上面计算出来的行和列生成表格
     //没生成一行就生成7列
     //行的循环
     for ( var i=0; i<rows; i++ ) {

      var tr = document.createElement('tr');

      //列的循环
      for ( var j=0; j<cells; j++ ) {

       var td = document.createElement('td');

       var v = i*cells + j - ( showMonthWeek - 1 );

       //根据这个月的日期控制显示的数字
       //td.innerHTML = v;
       if ( v > 0 && v <= showMonthDays ) {

        //高亮显示今天的日期
        if ( today.getFullYear() == showYear && today.getMonth() == showMonth && today.getDate() == v ) {
         td.className = 'today';
        }

        td.innerHTML = v;
       } else {
        td.innerHTML = '';
       }

       td.ondblclick = function() {
        calendarElement.style.display = 'none';

        text1.value = showYear + '年' + (showMonth+1) + '月' + this.innerHTML + '日';
       }

       tr.appendChild(td);

      }

      showTableElement.tBodies[0].appendChild(tr);

     }
    }

    function showOption() {

     var date = new Date(showYear, showMonth);
     var sy = date.getFullYear();
     var sm = date.getMonth();
     console.log(showYear, showMonth)

     var options = selectYearElement.getElementsByTagName('option');
     for (var i=0; i<options.length; i++) {
      if ( options[i].value == sy ) {
       options[i].selected = true;
      }
     }

     var options = selectMonthElement.getElementsByTagName('option');
     for (var i=0; i<options.length; i++) {
      if ( options[i].value == sm ) {
       options[i].selected = true;
      }
     }
    }
   }

   /*
    * 获取指定时间的时分秒
    * */
   function getTime(d) {
    return [
     addZero(d.getHours()),
     addZero(d.getMinutes()),
     addZero(d.getSeconds())
    ].join(':');
   }

   /*
   * 获取指定时间的年月日和星期
   * */
   function getDate(d) {
    return d.getFullYear() + '年'+ addZero(d.getMonth() + 1) +'月'+ addZero(d.getDate()) +'日 星期' + getWeek(d.getDay());
   }

   /*
   * 给数字加前导0
   * */
   function addZero(v) {
    if ( v < 10 ) {
     return '0' + v;
    } else {
     return '' + v;
    }
   }

   /*
   * 把数字星期转换成汉字星期
   * */
   function getWeek(n) {
    return '日一二三四五六'.split('')[n];
   }

  }
 </script>
</head>
<body>

<input type="text" id="text1">

 <div id="calendar">

  <div id="todayTime"></div>
  <div id="todayDate"></div>

  <div id="tools">
   <div class="l">
    <select id="selectYear"></select> 年
    <select id="selectMonth"></select> 月
   </div>
   <div class="r">
    <span id="prevMonth">∧</span>
    <span id="nextMonth">∨</span>
   </div>
  </div>

  <table id="showTable">
   <thead>
    <tr>
     <th>日</th>
     <th>一</th>
     <th>二</th>
     <th>三</th>
     <th>四</th>
     <th>五</th>
     <th>六</th>
    </tr>
   </thead>
   <tbody></tbody>
  </table>

 </div>

</body>
</html>

效果:

原生js实现仿window10系统日历效果的实例

以上这篇原生js实现仿window10系统日历效果的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 #Javascript
Vue实战之vue登录验证的实现代码
Oct 31 #Javascript
jQuery ajax读取本地json文件的实例
Oct 31 #jQuery
ES6解构赋值的功能与用途实例分析
Oct 31 #Javascript
js原生日历的实例(推荐)
Oct 31 #Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 #Javascript
详解RequireJs官方使用教程
Oct 31 #Javascript
You might like
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
Python pickle模块用法实例
2015/04/14 Python
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
Python作用域用法实例详解
2016/03/15 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
北京SQL新华信咨询
2016/09/30 面试题
小学生开学第一课活动方案
2014/03/27 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL