利用JS制作萬年歷的方法

<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>

*{
 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;
 }

<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(); //獲取當(dāng)前的日期
 showSelect(now.getFullYear(),now.getMonth()+1); //引用顯示選項卡的函數(shù)

 showDates(); //調(diào)用顯示日期的函數(shù)

 yearSelect.onchange=function(){ //當(dāng)選項卡改變時
 showDates();
 };
 monthSelect.onchange=function(){
 showDates();
 }
 }
 init(); //調(diào)用初始化函數(shù) 
 //創(chuàng)建option的函數(shù)
 function createOption(text,value,parent){
 var option = document.createElement('option');
 option.innerHTML = text;
 option.value = value;
 parent.appendChild(option);
 }
 //獲取當(dāng)前的日期并顯示在選項卡中
 function showSelect(year,month){
 yearSelect.value = year;
 monthSelect.value = month;
 }
 //獲取選擇的年月的第一天是星期幾
 function getDays(year,month){
 var d = new Date(year,month,1);
 return d.getDay();
 }
 //根當(dāng)前的select中的年和月來顯示日期
 function showDates(){
 datesUl.innerHTML= "";
 var year = yearSelect.value;
 var month = monthSelect.value;
 //創(chuàng)建空的li
 for(var i=0;i<getDays(year,month);i++){
 createLi("",datesUl);
 }
 //創(chuàng)建有日期的li
 for(var j=1;j<=getDatesOfMonth(year,month);j++){
 createLi(j,datesUl);
 }
 }
 //創(chuàng)建li并添加至對應(yīng)的容器
 function createLi(text,parent){
 var li = document.createElement('li');
 li.innerHTML = text;
 parent.appendChild(li);
 }
 //創(chuàng)建一個輸入年月計算出這個月有幾天的函數(shù)
 function getDatesOfMonth(year,month){
 var d = new Date(year,month,0);
 return d.getDate();
 }
</script>