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

2019-11-19 15:01:17

字体：大中小

来源：转载

供稿：网友

舞动的灵魂版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>

效果：