當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
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設置為todaycalendar.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制作日历的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python卸载后安装不上_python
- 下一篇： JS 关于事件冒泡，事件捕获，阻止事件冒