JavaScript快速实现日历效果

时间：2021-05-26

本文实例为大家分享了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='&nbsp'; // 清除今天的样式 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 id="title" 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

JavaScript快速实现日历效果

相关文章

javascript中Date对象应用之简易日历实现

JavaScript实现简单日历效果

JavaScript代码实现简单日历效果

javascript实现2016新年版日历

js实现简单的日历显示效果函数示例