純js模仿windows系統(tǒng)日歷
在網(wǎng)上看了幾篇關(guān)于生成日歷的js 教程于是自己也整理了一個(gè)想法思路 大家有什么建議歡迎提出
首先這個(gè)項(xiàng)目里面本人認(rèn)為的幾個(gè)難點(diǎn):
1、如何定義每一個(gè)月的第一天位置
每個(gè)月的第一天都不是固定的星期幾,所以第一天的輸出需要?jiǎng)觿?dòng)腦筋把它放到對(duì)應(yīng)的星期里面
2、每個(gè)月的最后一天有時(shí)候因?yàn)樾袛?shù)不夠輸出不了怎么辦?
下面會(huì)有答案 ^_^
思路:
1、定義好每一個(gè)月份的日期天數(shù)
2、獲取當(dāng)前的系統(tǒng)日期初始化數(shù)據(jù)
3、輸出日歷
2.1、先獲取當(dāng)前月的第一天是星期幾(這一點(diǎn)與日歷的排版至關(guān)重要!)
2.2、獲取當(dāng)前月的天數(shù)
2.3、獲取當(dāng)前月有多少個(gè)星期(即要輸出多少行 行數(shù)這里我會(huì)預(yù)留多一行)
2.4、獲取當(dāng)前年份和月份 用作顯示
下面便是完整的代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js 日歷</title> <style type="text/css"> *{ border: 0; padding: 0; margin: 0; font-family: "微軟雅黑"; } a{ text-decoration: none; color: #000; } li{ list-style-type: none; } .calendar_wrap{ width: 350px; margin: 0 auto; padding: 0; border: 1px solid #000; } .calendar_list{ width: 100%; margin-top: 10px; } .calendar_list tr{ width: 100%; } .calendar_list tr td{ text-align: center; height: 45px; } .control_bar{ word-spacing: -6px; } .control_bar span,.control_bar b{ display: inline-block; text-align: center; word-spacing: 0px; } .left-bt,.right-bt{ width: 50px; } #reduce_bt,#add_bt{ width: 50%; height: 25px; border-radius: 50%; } #reduce_bt:focus{ outline: none; } #add_bt:focus{ outline: none; } #current_date{ width: 250px; } #resetBt{ display: block; text-align: center; color: #fff; cursor: pointer; width: 120px; line-height: 40px; background-color: #FF7F27; margin: 0 auto; } #date_list tr td:hover{ background-color: #ccc; cursor: default; } </style> </head> <body> <div class="calendar_wrap"> <div class="control_bar"> <span class="left-bt"><input type="button" id="reduce_bt" value="<"></span> <b id="current_date">2017-02</b> <span class="right-bt"><input type="button" id="add_bt" value=">"></span> </div> <table class="calendar_list" cellspacing="0"> <thead> <tr> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> </tr> </thead> <tbody id="date_list"></tbody> </table> </div> <span id="resetBt">回到現(xiàn)在日期</span> <script type="text/javascript"> var dateScreen = document.getElementById('current_date');//獲取顯示當(dāng)前年份月份的div var reduceBt = document.getElementById('reduce_bt');//獲取減少月份的按鈕 var addBt = document.getElementById('add_bt');//獲取增加月份的按鈕 var dateList = document.getElementById('date_list');//獲取顯示所有日期部分 var resetBt = document.getElementById('resetBt');//獲取重設(shè)按鈕 //定義好每月的日期總數(shù) 總數(shù)按js 獲取月份數(shù)值的下標(biāo)方式儲(chǔ)存 var overall_date = [31,28,31,30,31,30,31,31,30,31,30,31]; var add_date = 1;//定義添加日期數(shù)的初始化 //初始化日歷 //獲取現(xiàn)在的日期 var now_date = new Date(); var nowFullYear = now_date.getFullYear(); var nowMonth = now_date.getMonth(); //執(zhí)行日歷輸出函數(shù) printCalendar(); //----------------------------------- //月份減少按鈕點(diǎn)擊事件 reduceBt.onclick = function(){ nowMonth = nowMonth - 1; if (nowMonth == -1) { nowFullYear = nowFullYear - 1; nowMonth = 11; } clearRows(); printCalendar(); } //增加月份按鈕點(diǎn)擊事件 addBt.onclick = function(){ nowMonth+= 1; if (nowMonth == 12) { nowFullYear+= 1; nowMonth = 0; } clearRows(); printCalendar(); } //重設(shè)按鈕點(diǎn)擊事件 resetBt.onclick = function(){ var resetDate = new Date(); nowFullYear = resetDate.getFullYear(); nowMonth = resetDate.getMonth(); clearRows(); printCalendar(); } function printCalendar(){ var printDate = new cur_date(nowFullYear,nowMonth);//實(shí)例cur_date方法 var printFirstDay = printDate.firstDay;//獲取要輸出月份第一天的星期 var printTotalDate = printDate.totalDate;//獲取輸出日期的總數(shù) var printMonth = printDate.cur_month;//獲取輸出的月份 (printMonth >= 9)?(printMonth = (printMonth + 1)):(printMonth = ("0" + (printMonth + 1))); //調(diào)整月份的顯示格式 var printYear = printDate.cur_year;//獲取輸出的年份 var totalRows = Math.ceil((printTotalDate + (printFirstDay - 1)) / 7) + 1; //獲取行數(shù) //利用天數(shù)除以7天獲得行數(shù)并將它向上去整 但是上限是5 //而考慮到某些月會(huì)有6行所以在總行數(shù)里面加1 以防萬(wàn)一 //開始輸出 //首先顯示出年和月 dateScreen.innerText = printYear + "-" + printMonth; //開始輸出日期 for (var i = 0; i < totalRows; i++) { dateList.insertRow(i); for (var j = 0; j < 7; j++) { //當(dāng)天數(shù)總量大于額定總量時(shí)先終止內(nèi)部循環(huán) if (add_date > printTotalDate) { break; } dateList.rows[i].insertCell(j); //改變周日和周六的文字顏色 if (j == 0) { dateList.rows[i].cells[j].style.color = "red"; dateList.rows[i].cells[j].style.fontWeight = "bold"; }else if(j == 6){ dateList.rows[i].cells[j].style.color = "green"; dateList.rows[i].cells[j].style.fontWeight = "bold"; } if (i == 0 && j >= printFirstDay) { //當(dāng)此時(shí)是第一行時(shí)而且單元格下標(biāo)大于等于當(dāng)前月第一天的星期就開始為單元格填入文本 dateList.rows[i].cells[j].innerText = add_date; add_date++; }else if(i > 0){ //第一行以后的單元格就按循環(huán)添加即可 dateList.rows[i].cells[j].innerText = add_date; add_date++; } } } add_date = 1;//輸出完把日期總數(shù)重新賦值為1 } //獲取當(dāng)前年、月、第一天是星期幾、日期總數(shù) function cur_date(curYear,curMonth){ this.cur_firstDate = new Date(curYear,curMonth,1);//獲取現(xiàn)在日期的第一天 this.cur_year = curYear;//獲取當(dāng)前的年 this.cur_month = curMonth;//獲取當(dāng)前的月 this.totalDate = is_leapYear(curYear,curMonth);//獲取總天數(shù) this.firstDay = this.cur_firstDate.getDay()//獲取每個(gè)月的第一天是星期幾 } //判斷今年是否為閏年 function is_leapYear(target_year,target_month){ if ((target_month == 1) && (target_year % 4 == 0) && ((target_year % 100 != 0) || (target_year % 400 != 0))) { //當(dāng)前月是2月且當(dāng)前年是閏年 return 29; }else{ //其他月按正常日期總數(shù)輸出 return overall_date[target_month]; } } function clearRows(){ var rowsNum = dateList.rows.length; while(rowsNum > 0){ dateList.deleteRow(rowsNum - 1); rowsNum--; } } </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
document.write()及其輸出內(nèi)容的樣式、位置控制
document.write(),用于簡(jiǎn)單的打印內(nèi)容到頁(yè)面上,可以逐字打印你需要的內(nèi)容,既然可以輸出變量,肯定會(huì)想要去控制下變量的顯示,比如位置以及樣式2013-08-08webpack學(xué)習(xí)筆記之優(yōu)化緩存、合并、懶加載
這篇文章主要介紹了webpack學(xué)習(xí)筆記之優(yōu)化緩存、合并、懶加載,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08使用GruntJS構(gòu)建Web程序之構(gòu)建篇
前一篇記錄了Grunt的安裝,這篇介紹下怎么使用Gruntjs來搭建一個(gè)前端項(xiàng)目,然后使用grunt合并,壓縮JS文件。2014-06-06微信小程序?qū)崿F(xiàn)頁(yè)面導(dǎo)航的方法詳解
這篇文章主要為大家詳細(xì)介紹一下微信小程序?qū)崿F(xiàn)頁(yè)面導(dǎo)航的幾種方法以及幫助大家掌握如何使用頁(yè)面之間的導(dǎo)航跳轉(zhuǎn),感興趣的可以了解一下2022-07-07微信小程序?qū)崿F(xiàn)購(gòu)物頁(yè)面左右聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)購(gòu)物頁(yè)面左右聯(lián)動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-02-02.net MVC+Bootstrap下使用localResizeIMG上傳圖片
這篇文章主要為大家詳細(xì)介紹了.net MVC和Bootstrap下使用 localResizeIMG上傳圖片,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04用html+css+js實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的圖片切換特效
這篇文章主要介紹了用html+css+js實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的圖片切換特效,需要的朋友可以參考下2014-05-05JavaScript性能優(yōu)化總結(jié)之加載與執(zhí)行
本文詳細(xì)介紹了如何正確的加載和執(zhí)行JavaScript代碼,從而提高其在瀏覽器中的性能。對(duì)JavaScript學(xué)習(xí)者很有幫助,有需要的可以參考學(xué)習(xí)。2016-08-08