JS仿window10系統日曆效果的實作範例

舞動的靈魂版js日曆，完全採用js實現，故而實現了與語言無關，jsp、asp.net php asp皆可使用.無論你是開發軟體，還是網站，均是不可或缺的實用程式碼。

該日曆主要實現了獲取當前時間時分秒，年月日星期，動態生成選擇年的select，月的select，然後根據你所選的年月，顯示該年月對應的這一個月的日期。

點擊上一個月，下個月按鈕，在 下拉清單 中顯示對應的年月。

Title #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; } 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 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

年 月

∧ ∨

日 一 二 三 四 五 六

效果：

#

JS仿window10系統日曆效果的實作範例

相關文章