利用JS制作万年历的方法

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

1.HTML布局:

<div id="calendar">
 <div id="month_year">
 <select id="year"></select>年
 <select id="month"></select>月
 </div>
 <ul id="title">
 <li>星期日</li>
 <li>星期一</li>
 <li>星期二</li>
 <li>星期三</li>
 <li>星期四</li>
 <li>星期五</li>
 <li>星期六</li>
 </ul>
 <ul id="datesUl"></ul>
</div>

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代码分析:

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

<script>
 var yearSelect = document.getElementById('year');
 var monthSelect = document.getElementById('month');
 var datesUl = document.getElementById('datesUl');
 //初始化
 function init(){
 for(var year=1990;year<3000;year++){ //初始化俩个选项卡
 createOption(year,year,yearSelect);
 }
 for(var month=1;month<13;month++){
 createOption(month,month,monthSelect);
 }
 var now = new Date(); //获取当前的日期
 showSelect(now.getFullYear(),now.getMonth()+1); //引用显示选项卡的函数

 showDates(); //调用显示日期的函数

 yearSelect.onchange=function(){ //当选项卡改变时
 showDates();
 };
 monthSelect.onchange=function(){
 showDates();
 }
 }
 init(); //调用初始化函数 
 //创建option的函数
 function createOption(text,value,parent){
 var option = document.createElement('option');
 option.innerHTML = text;
 option.value = value;
 parent.appendChild(option);
 }
 //获取当前的日期并显示在选项卡中
 function showSelect(year,month){
 yearSelect.value = year;
 monthSelect.value = month;
 }
 //获取选择的年月的第一天是星期几
 function getDays(year,month){
 var d = new Date(year,month,1);
 return d.getDay();
 }
 //根当前的select中的年和月来显示日期
 function showDates(){
 datesUl.innerHTML= "";
 var year = yearSelect.value;
 var month = monthSelect.value;
 //创建空的li
 for(var i=0;i<getDays(year,month);i++){
 createLi("",datesUl);
 }
 //创建有日期的li
 for(var j=1;j<=getDatesOfMonth(year,month);j++){
 createLi(j,datesUl);
 }
 }
 //创建li并添加至对应的容器
 function createLi(text,parent){
 var li = document.createElement('li');
 li.innerHTML = text;
 parent.appendChild(li);
 }
 //创建一个输入年月计算出这个月有几天的函数
 function getDatesOfMonth(year,month){
 var d = new Date(year,month,0);
 return d.getDate();
 }
</script>