<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();            //獲取當前的日期    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>