好资源导航 » 文章资讯 » JavaScript实现简单日历效果

JavaScript实现简单日历效果

2023-07-16 21:27:03 71

本文实例为大家分享了JavaScript实现简单日历效果的具体代码，供大家参考，具体内容如下

实现效果：

根据所选择的年月，列出当月对应是周几，效果图如下：

实现思路：

1、使用select标签保存年月的所选菜单。使用table标签保存当月天数，表头为固定的周日周一等。

2、使用option对象，给年月循环赋值。

3、将每月的天数保存到数组中，根据所选的年月获取当月的天数，以及当月一号对应周几，对应周几就在第一行先打印几个空格，然后从一号开始依次打印当月天数。

4、刷新年月时，清除上次表格中（除表头的周）的数据，重新填入数据。

代码实现：








*{margin:0px;padding:0px;}
#div{width:400px;height:300px;border:1pxsolidred;margin:auto;}
#divdiv:nth-child(1){display:flex;align-items:center;justify-content:center;}
#tbcal{border-collapse:collapse;width:100%;text-align:center;}
#tbcaltrtd{border:1pxsolidred;}


//加载完HTML内容后,JavaScript开始执行
window.onload=function(){
initial();
document.getElementById("selyear").onchange=show;
document.getElementById("selmonth").onchange=show;
show();
}
//显示日历
functionshow(){
//获取鼠标点击所选择的年月值
varyear=parseInt(document.getElementById("selyear").value);
varmonth=parseInt(document.getElementById("selmonth").value);
//判断是否为闰年,以便确定2月的天数
varflag=year%4==0&&year%100!=0||year%400==0;
vardayofmonth=[31,flag?29:28,31,30,31,30,31,31,30,31,30,31];
//给date赋值,值为所选择的某年某月一号
vardt=newDate();
dt.setFullYear(year);
dt.setMonth(month-1);
dt.setDate(1);
//获取date对应周几
varweek=dt.getDay();
//当月应该打印多少行
varrows=Math.ceil((dayofmonth[dt.getMonth()]+week)/7);
vark=0;
//如果表格中有除表头外的数据,进行数据删除,避免上次月份的数据对下次有影响
vartable=document.getElementById("tbcal");
while(table.rows.length>1){
table.deleteRow(1);

}
//循环向表格中添加数据，生成日历
for(vari=0;idayofmonth[dt.getMonth()]+week){
cell.innerHTML="";
}
else{
cell.innerHTML=k-week;
}
}
}
}
//通过option对象向年月中循环赋值
functioninitial(){
varyears=document.getElementById("selyear");
varmonths=document.getElementById("selmonth");
for(vari=1990;i<2019;i++){
varoption=document.createElement("option");
option.text=i;
years.add(option);
}
for(vari=1;i<13;i++){
varoption=document.createElement("option");
option.text=i;
months.add(option);
}
}






 年 
 月 





周日
周一
周二
周三
周四
周五
周六

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

JavaScript实现简单日历效果

热门推荐

随机推荐