微客导航 » 文章资讯 » 利用JS制作万年历的方法

利用JS制作万年历的方法

2023-09-26 09:16:05 305

我们知道,万年历在人们的生活中是在平常不过的一种东西了,那么怎样用JS来实现在网页中展示一个与众不同万年历呢

1.HTML布局:



年
月

星期日

星期一

星期二

星期三

星期四

星期五

星期六

1.首先在布局上,可以先用一个id为calender(日历)的div将你的万年历包住,以便我们对万年历的位置进行设置;

2.在这个大的div中有三部分:1.month_year用以设置年月;2.title用以显示星期;3.detesUl用以显示具体的日期;

CSS样式:

*{
padding:0;
margin:0;
list-style:none;
}
#calendar{
width:700px;
background-color:lightgray;
margin:20pxauto;

}
#calendar::after{
content:"";
display:block;
clear:both;
}
#month_year{
width:700px;
height:50px;
line-height:50px;
text-align:center;
}
ul>li{
float:left;
width:100px;
height:50px;
text-align:center;
line-height:50px;
}
#datesUl>li:empty{
opacity:0;
}
#datesUl>li:hover{
background-color:lightblue;
}

JS代码分析:

做一些初始化的处理,给俩个显示年月的选项卡中添加内容便于用户查找
构造一些我们要用到的函数:如输入年月计算出这个月有几天,创建添加option及li的函数

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

返回顶部
3162201930
czq8825@qq.com

利用JS制作万年历的方法

热门推荐

随机推荐