舞動(dòng)的靈魂版js日歷，完全采用js實(shí)現(xiàn)，故而實(shí)現(xiàn)了與語言無關(guān)，jsp、asp.net php asp均可使用.無論你是開發(fā)軟件，還是網(wǎng)站，均是不可或缺的實(shí)用代碼。
該日歷主要實(shí)現(xiàn)了獲取當(dāng)前時(shí)間時(shí)分秒，年月日星期，動(dòng)態(tài)生成選擇年的select，月的select，然后根據(jù)你所選中的年月，顯示該年月對(duì)應(yīng)的這一個(gè)月的日期。
點(diǎn)擊上一個(gè)月，下一個(gè)月按鈕，在下拉列表中顯示對(duì)應(yīng)的年月。
<!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'; /* * 獲取今天的時(shí)間 * */ var today = new Date(); //設(shè)置日歷顯示的年月 var showYear = today.getFullYear(); var showMonth = today.getMonth(); //持續(xù)更新當(dāng)前時(shí)間 updateTime(); //顯示當(dāng)前的年月日星期 todayDateElement.innerHTML = getDate(today); //動(dòng)態(tài)生成選擇年的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); } //動(dòng)態(tài)生成選擇月的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(); } //上一個(gè)月 prevMonthElement.onclick = function() { showMonth--; showTable(); showOption(); } //下一個(gè)月 nextMonthElement.onclick = function() { showMonth++; showTable(); showOption(); } /* * 實(shí)時(shí)更新當(dāng)前時(shí)間 * */ function updateTime() { var timer = null; //每個(gè)500毫秒獲取當(dāng)前的時(shí)間，并把當(dāng)前的時(shí)間格式化顯示到指定位置 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 = ''; //根據(jù)當(dāng)前需要顯示的年和月來創(chuàng)建日歷 //創(chuàng)建一個(gè)要顯示的年月的下一個(gè)的日期對(duì)象 var date1 = new Date(showYear, showMonth+1, 1, 0, 0, 0); //對(duì)下一個(gè)月的1號(hào)0時(shí)0分0秒的時(shí)間 - 1得到要顯示的年月的最后一天的時(shí)間 var date2 = new Date(date1.getTime() - 1); //得到要顯示的年月的總天數(shù) var showMonthDays = date2.getDate(); //獲取要顯示的年月的1日的星期,從0開始的星期 date2.setDate(1); //showMonthWeek表示這個(gè)月的1日的星期，也可以作為表格中前面空白的單元格的個(gè)數(shù) var showMonthWeek = date2.getDay(); var cells = 7; var rows = Math.ceil( (showMonthDays + showMonthWeek) / cells ); //通過上面計(jì)算出來的行和列生成表格 //沒生成一行就生成7列 //行的循環(huán) for ( var i=0; i<rows; i++ ) { var tr = document.createElement('tr'); //列的循環(huán) for ( var j=0; j<cells; j++ ) { var td = document.createElement('td'); var v = i*cells + j - ( showMonthWeek - 1 ); //根據(jù)這個(gè)月的日期控制顯示的數(shù)字 //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; } } } } /* * 獲取指定時(shí)間的時(shí)分秒 * */ function getTime(d) { return [ addZero(d.getHours()), addZero(d.getMinutes()), addZero(d.getSeconds()) ].join(':'); } /* * 獲取指定時(shí)間的年月日和星期 * */ function getDate(d) { return d.getFullYear() + '年'+ addZero(d.getMonth() + 1) +'月'+ addZero(d.getDate()) +'日 星期' + getWeek(d.getDay()); } /* * 給數(shù)字加前導(dǎo)0 * */ function addZero(v) { if ( v < 10 ) { return '0' + v; } else { return '' + v; } } /* * 把數(shù)字星期轉(zhuǎn)換成漢字星期 * */ 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實(shí)現(xiàn)仿window10系統(tǒng)日歷效果的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
