作者：郭健曲 | 来源：互联网 | 2022-01-25 10:54
我们知道,万年历在人们的生活中是在平常不过的一种东西了,那么怎样用JS来实现在网页中展示一个与众不同万年历呢
1.HTML布局:
我们知道,万年历在人们的生活中是在平常不过的一种东西了,那么怎样用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: 20px auto;
}
#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的函数
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
京公网安备 11010802041100号