JavaScript快速实现日历效果
程序员文章站
2022-06-24 22:25:18
本文实例为大家分享了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 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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: java实现异步导出数据