利用JS制作万年历的方法
我们知道,万年历在人们的生活中是在平常不过的一种东西了,那么怎样用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的函数
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。