js 日历

<div>
    <div class="content"></div>
    <div>
        <a class="left" href="javascript:;">&lt;</a>
        <a class="right" href="javascript:;">&gt;</a>
    </div>
</div>
<table width="100%" border="0" class="mui-text-center">    <thead id="week">    <tr>        <th>日</th>        <th>一</th>        <th>二</th>        <th>三</th>        <th>四</th>        <th>五</th>        <th>六</th>    </tr>    </thead>    <tbody id="date">    </tbody></table>
<script>
window.onload = function(){
   //封装id
   function $(_id){
      return document.getElementById(_id);
   }
   //封装class
   function change(_class){
      return document.getElementsByClassName(_class);
   }
   var dateObj = (function(){
       var _date = new Date();
       return {
          getDate : function(){
              return _date;
          },
          setDate : function(date) {
              _date = date;
          }
       };
   })();
   //循环行数
   var str = "";
   for(var i = 0; i < 6; i++) {  
      str += "<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
    }
    $("date").innerHTML = str;
   function loadCalendar(){
      var year = dateObj.getDate().getFullYear();//获取年
       var month = dateObj.getDate().getMonth() + 1;//获取月
       var dateStr = getDateStr(dateObj.getDate());//获取日
       //显示年月
       var titleStr = dateStr.substr(0, 4) + "年" + dateStr.substr(4,2) + "月";
       var april = dateStr.substr(0, 4) + dateStr.substr(4,2);
       change("content")[0].innerHTML = titleStr;
       change("content")[0].setAttribute("april",april);
       
       var td = $("date").getElementsByTagName("td");
       var firstDay = new Date(year, month - 1, 1);
       for(var i = 0; i < td.length; i++){
          var thisDay = new Date(year, month - 1, i + 1 - firstDay.getDay());
          var thisDayStr = getDateStr(thisDay);
          td[i].innerHTML = "<a href='javascript:;'>" + thisDay.getDate() + "</a>";
          td[i].setAttribute('data', thisDayStr);
          if(thisDayStr == getDateStr(new Date())) {//获取当前
              td[i].className = 'on';
          }else if(thisDayStr.substr(0, 6) == getDateStr(firstDay).substr(0, 6)) {//除当前以外class
              td[i].className = 'day'; 
          }else{
              td[i].className = 'gray';//上月下月天数
          }
       }
   }
   
   //显示上一月
   change("left")[0].click(function(){
      var date = dateObj.getDate();
       dateObj.setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1));
       loadCalendar();
       data_time();
   });
   
   //显示下一月
   change("right")[0].click(function(){
      var date = dateObj.getDate();
       dateObj.setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1));
       loadCalendar();
       data_time();
   });
   
   function getDateStr(date) {
       var _year = date.getFullYear();
       var _month = date.getMonth() + 1;
       var _d = date.getDate();
       _month = (_month > 9) ? ("" + _month) : ("0" + _month);
       _d = (_d > 9) ? ("" + _d) : ("0" + _d);
       return _year + _month + _d;
   }
   loadCalendar();
   data_time();
}
</script>