0.效果預覽
只實現了日歷最基礎的功能，當前日期紅色顯示，可通過上方的左右按鈕查看上一月或下一月的日期。
1.HTML部分
1 <body> 2 <div id="cldFrame"> 3 <div id="cldBody"> 4 <table> 5 <thead> 6 <tr> 7 <td colspan="7"> 8 <div id="top"> 9 <span id="left"><</span> 10 <span id="topDate"></span> 11 <span id="right">></span> 12 </div> 13 </td> 14 </tr> 15 <tr id="week"> 16 <td>日</td> 17 <td>一</td> 18 <td>二</td> 19 <td>三</td> 20 <td>四</td> 21 <td>五</td> 22 <td>六</td> 23 </tr> 24 </thead> 25 <tbody id="tbody"> 26 </tbody> 27 </table> 28 </div> 29 </div> 30 </body>
2.CSS部分
1 1 #cldFrame{ 2 2 position: relative; 3 3 width: 440px; 4 4 margin: 50px auto; 5 5 } 6 6 #cldBody{ 7 7 margin: 10px; 8 8 position: absolute; 9 9 width: 420px; 10 10 } 11 11 #top{ 12 12 position: relative; 13 13 height: 60px; 14 14 text-align: center; 15 15 line-height: 60px; 16 16 } 17 17 #topDate{ 18 18 font-size: 30px; 19 19 } 20 20 .curDate{ 21 21 color: red; 22 22 font-weight: bold; 23 23 } 24 24 table{ 25 25 background-color: #f7f7f7; 26 26 } 27 27 #week td{ 28 28 font-size: 15px; 29 29 } 30 30 td{ 31 31 height: 60px; 32 32 width: 60px; 33 33 text-align: center; 34 34 font-family: Simsun; 35 35 font-size: 20px; 36 36 } 37 37 #left, #right{ 38 38 position: absolute; 39 39 width: 60px; 40 40 height: 60px; 41 41 } 42 42 #left{left: 0px;} 43 43 #right{right: 0px;} 44 44 #left:hover, #right:hover{ 45 45 background-color: rgba(30, 30, 30, 0.2); 46 46 }
當前顯示月份和日期下面將在JS中添加。
3.JS部分及原理講解
先介紹兩個常用的和時間有關的函數，相信大多數人都接觸過~
①判斷某年是否是閏年
1 1 /*判斷某年是否是閏年*/ 2 2 function isLeap(year) { 3 3 if((year%4==0 && year%100!=0) || year%400==0){ 4 4 return true; 5 5 } 6 6 else{ 7 7 return false; 8 8 } 9 9 }
二月大概是十二個月份中最不安分的一個月。
②判斷某年某月某日是星期幾
1 var monthDay = [31,0,31,30,31,30,31,31,30,31,30,31];
在這之前用數組存放每個月有多少天，我這里將二月的天數設置成了0，之后再決定是加28還是29。
1 1 /*判斷某年某月某日是星期幾，默認日為1號*/ 2 2 function whatDay(year, month, day=1) { 3 3 var sum = 0; 4 4 sum += (year-1)*365+Math.floor((year-1)/4)-Math.floor((year-1)/100)+Math.floor((year-1)/400)+day; 5 5 for(var i=0; i<month-1; i++){ 6 6 sum += monthDay[i]; 7 7 } 8 8 if(month > 2){ 9 9 if(isLeap(year)){ 10 10 sum += 29; 11 11 } 12 12 else{ 13 13 sum += 28; 14 14 } 15 15 } 16 16 return sum%7; //余數為0代表那天是周日，為1代表是周一，以此類推 17 17 }
這個函數是為了判斷某年某月的1號是星期幾而設定的，實際上可以不設置day這個參數，加上了day這個變量，允許使用者在查某日的日期是星期幾時也能調用這個函數。
③日歷添加部分
根據當前日期決定日歷顯示哪個月的日期，根據那月的1號是星期幾決定1號的添加位置，前方用空格子填充。該月添加完后后方也用空格子補齊。
1 /*顯示日歷*/ 2 function showCld(year, month, firstDay){ 3 var i; 4 var tagClass = ""; 5 var nowDate = new Date(); 6 7 var days;//從數組里取出該月的天數 8 if(month == 2){ 9 if(isLeap(year)){ 10 days = 29; 11 } 12 else{ 13 days = 28; 14 } 15 } 16 else{ 17 days = monthDay[month-1]; 18 } 19 20 /*當前顯示月份添加至頂部*/ 21 var topdateHtml = year + "年" + month + "月"; 22 var topDate = document.getElementById('topDate'); 23 topDate.innerHTML = topdateHtml; 24 25 /*添加日期部分*/ 26 var tbodyHtml = '<tr>'; 27 for(i=0; i<firstDay; i++){//對1號前空白格的填充 28 tbodyHtml += "<td></td>"; 29 } 30 var changLine = firstDay; 31 for(i=1; i<=days; i++){//每一個日期的填充 32 if(year == nowDate.getFullYear() && month == nowDate.getMonth()+1 && i == nowDate.getDate()) { 33 tagClass = "curDate";//當前日期對應格子 34 } 35 else{ 36 tagClass = "isDate";//普通日期對應格子，設置class便於與空白格子區分開來 37 } 38 tbodyHtml += "<td class=" + tagClass + ">" + i + "</td>"; 39 changLine = (changLine+1)%7; 40 if(changLine == 0 && i != days){//是否換行填充的判斷 41 tbodyHtml += "</tr><tr>"; 42 } 43 } 44 if(changLine!=0){//添加結束，對該行剩余位置的空白填充 45 for (i=changLine; i<7; i++) { 46 tbodyHtml += "<td></td>"; 47 } 48 }//實際上不需要填充后方，但強迫症必須整整齊齊！ 49 tbodyHtml +="</tr>"; 50 var tbody = document.getElementById('tbody'); 51 tbody.innerHTML = tbodyHtml; 52 }
調用后，日歷就可以完整顯示了~
1 var curDate = new Date(); 2 var curYear = curDate.getFullYear(); 3 var curMonth = curDate.getMonth() + 1; 4 showCld(curYear,curMonth,whatDay(curYear,curMonth));
④下一月與上一月
1 function nextMonth(){ 2 var topStr = document.getElementById("topDate").innerHTML; 3 var pattern = /\d+/g; 4 var listTemp = topStr.match(pattern); 5 var year = Number(listTemp[0]); 6 var month = Number(listTemp[1]); 7 var nextMonth = month+1; 8 if(nextMonth > 12){ 9 nextMonth = 1; 10 year++; 11 } 12 document.getElementById('topDate').innerHTML = ''; 13 showCld(year, nextMonth, whatDay(year, nextMonth)); 14 } 15 function preMonth(){ 16 var topStr = document.getElementById("topDate").innerHTML; 17 var pattern = /\d+/g; 18 var listTemp = topStr.match(pattern); 19 var year = Number(listTemp[0]); 20 var month = Number(listTemp[1]); 21 var preMonth = month-1; 22 if(preMonth < 1){ 23 preMonth = 12; 24 year--; 25 } 26 document.getElementById('topDate').innerHTML = ''; 27 showCld(year, preMonth, whatDay(year, preMonth)); 28 }
兩者沒多大差別，別忘了要綁定到按鈕上：
1 document.getElementById('right').onclick = function(){ 2 nextMonth(); 3 } 4 document.getElementById('left').onclick = function(){ 5 preMonth(); 6 }
更多有趣的功能等待着你去添加~
轉載：https://www.jianshu.com/p/641820efee44