原生js实现仿window10系统日历效果的实例
程序员文章站
2022-06-24 13:43:55
舞动的灵魂版js日历，完全采用js实现，故而实现了与语言无关，jsp、asp.net php asp均可使用.无论你是开发软件，还是网站，均是不可或缺的实用代码。
该日历...
舞动的灵魂版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>
效果：
以上这篇原生js实现仿window10系统日历效果的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。