JavaScript快速實現(xiàn)日歷效果
本文實例為大家分享了JavaScript快速實現(xiàn)日歷效果的具體代碼，供大家參考，具體內(nèi)容如下
效果圖
代碼
<!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’); // 通過日歷對象去調(diào)用自身的init方法 calendar.init(form); } var calendar = { year: null, month: null, //日的數(shù)組 dayTable: null, //初始化函數(shù) init(form) {// 1獲取日數(shù)組this.dayTable=form.getElementsByTagName(’td’);//2創(chuàng)建日歷,傳入當前時間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)} }, //清除日歷數(shù)據(jù) 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要創(chuàng)建的日期 createCalendar(form,date){//獲取此時的年份 this.year=date.getFullYear(); //獲取此時的月份 this.month=date.getMonth(); //年份月份寫入日歷 form.getElementsByTagName(’th’)[1].innerHTML = this.year+'年'+(this.month+1)+'月'; //獲取本月的天數(shù) var dataNum=this.getDateLen(this.year,this.month); var fristDay = this.getFristDay(calendar.year,calendar.month);// 循環(huán)將每一天的天數(shù)寫入到日歷中// 讓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'; }} }, // 獲取本月份的天數(shù) getDateLen(year,month){//獲取下個月的第一天var nextMonth=new Date(year,month+1,1);// 設置下月第一天的小時-1，也就是上個月最后一天的小時數(shù)，隨便減去一個值不要超過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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關文章：
1. 編程語言PHP在Web開發(fā)領域的優(yōu)勢在哪？2. 詳解Android studio 動態(tài)fragment的用法3. Spring Boot和Thymeleaf整合結合JPA實現(xiàn)分頁效果(實例代碼)4. 基于android studio的layout的xml文件的創(chuàng)建方式5. Android如何加載Base64編碼格式圖片6. 什么是python的自省7. 圖文詳解vue中proto文件的函數(shù)調(diào)用8. .Net Core使用Coravel實現(xiàn)任務調(diào)度的完整步驟9. 在IDEA中實現(xiàn)同時運行2個相同的java程序10. 解決Android studio xml界面無法預覽問題
網(wǎng)公網(wǎng)安備