php仿win10,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

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

//列的循环

for ( var j=0; 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

if ( options[i].value == sy ) {

options[i].selected = true;

}

}

var options = selectMonthElement.getElementsByTagName('option');

for (var i=0; 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];

}

}

年

月

∧

∨

日一二三四五六

效果：