js 日历

来源：互联网发布：钣金放样展开图软件编辑：程序博客网时间：2024/06/05 16:32
<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>
阅读全文
0 0