原生js實現仿window10系統日歷效果的實例

來源：懂視網責編：小采時間：2020-11-27 22:26:21

原生js實現仿window10系統日歷效果的實例

原生js實現仿window10系統日歷效果的實例:舞動的靈魂版js日歷，完全采用js實現，故而實現了與語言無關，jsp、asp.net php asp均可使用.無論你是開發軟件，還是網站，均是不可或缺的實用代碼。該日歷主要實現了獲取當前時間時分秒，年月日星期，動態生成選擇年的select，月的select，然后根據你

推薦度：

點擊下載本文 文檔為doc格式

導讀原生js實現仿window10系統日歷效果的實例:舞動的靈魂版js日歷，完全采用js實現，故而實現了與語言無關，jsp、asp.net php asp均可使用.無論你是開發軟件，還是網站，均是不可或缺的實用代碼。該日歷主要實現了獲取當前時間時分秒，年月日星期，動態生成選擇年的select，月的select，然后根據你

舞動的靈魂版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>

效果：