JavaScript快速实现日历效果
本文实例为大家分享了JavaScript快速实现日历效果的具体代码，供大家参考，具体内容如下
效果图
代码
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> * { margin: 0; padding: 0; } #calendar { background-color: #9900ff; color: #fff; border-radius: 5px; margin: 100px auto; } #title { font-size: 1.4em; padding: 4px 0.55em; } #days th { font-weight: bold; text-align: center; padding: 4px 0.55em; } #calendar td { text-align: center; padding: 4px 20px; } #today { color: #f00; font-weight: bold; } .poin { cursor: pointer; cursor: hand; } </style> <script> window.onload=function(){ var form = document.getElementById(’calendar’); // 通过日历对象去调用自身的init方法 calendar.init(form); } var calendar = { year: null, month: null, //日的数组 dayTable: null, //初始化函数 init(form) {// 1获取日数组this.dayTable=form.getElementsByTagName(’td’);//2创建日历,传入当前时间this.createCalendar(form,new Date());var nextMon=form.getElementsByTagName(’th’)[2];var preMon=form.getElementsByTagName(’th’)[0];preMon.onclick=function(){calendar.clearCalendar(form) var preDate=new Date(calendar.year,calendar.month-1,1); calendar.createCalendar(form,preDate)}nextMon.onclick=function(){ calendar.clearCalendar(form) var nextDate=new Date(calendar.year,calendar.month+1,1); calendar.createCalendar(form,nextDate)} }, //清除日历数据 clearCalendar(form){var tds=form.getElementsByTagName(’td’);for (var i = 0; i < tds.length; i++) { tds[i].innerHTML=’ ’; // 清除今天的样式 tds[i].id=’’;} }, // 3生成日历 // from table表格 date要创建的日期 createCalendar(form,date){//获取此时的年份 this.year=date.getFullYear(); //获取此时的月份 this.month=date.getMonth(); //年份月份写入日历 form.getElementsByTagName(’th’)[1].innerHTML = this.year+'年'+(this.month+1)+'月'; //获取本月的天数 var dataNum=this.getDateLen(this.year,this.month); var fristDay = this.getFristDay(calendar.year,calendar.month);// 循环将每一天的天数写入到日历中// 让i表示日期。for (var i = 1; i <= dataNum; i++) { this.dayTable[fristDay+i-1].innerHTML=i; var nowDate =new Date(); if(i ==nowDate.getDate() && calendar.month ==nowDate.getMonth()&&calendar.year == nowDate.getFullYear()){ // 将当期元素的id设置为today calendar.dayTable[i+fristDay-1].id = 'today'; }} }, // 获取本月份的天数 getDateLen(year,month){//获取下个月的第一天var nextMonth=new Date(year,month+1,1);// 设置下月第一天的小时-1，也就是上个月最后一天的小时数，随便减去一个值不要超过24小时nextMonth.setHours(nextMonth.getHours()-1);//获取此时下个月的日期,就是上个月最后一天.return nextMonth.getDate(); }, // 获取本月第一天为星期几。 getFristDay:function(year,month){var fristDay=new Date(year,month,1);return fristDay.getDay(); } } </script></head><body> <table id='calendar'> <tr> <!-- 向左箭头 --> <th class='poin'><<</th> <!-- 年月 --> <th colspan='5'></th> <!-- 向右箭头 --> <th class='poin'>>></th> </tr> <tr id='days'> <th>日</th> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> <th>六</th> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table></body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
网公网安备