昨天,我接到的公司老司機的命令,要求我完成一個萬年曆,目的是想通過日曆來利用ajax顯示報名信息。平時不怎麼重視日曆的我遇到了很多麻煩,幸好在公司的一臺機器上找到了問題解決的思路。雖然不知道這位sir是誰,但是我還是要感謝他,他的思路讓我明白了什麼是閏年,什麼是小月大月,跳轉月份的規則...總之,如 ...
昨天,我接到的公司老司機的命令,要求我完成一個萬年曆,目的是想通過日曆來利用ajax顯示報名信息。平時不怎麼重視日曆的我遇到了很多麻煩,幸好在公司的一臺機器上找到了問題解決的思路。雖然不知道這位sir是誰,但是我還是要感謝他,他的思路讓我明白了什麼是閏年,什麼是小月大月,跳轉月份的規則...總之,如果你看到了的話煩請您聯繫我一聲,我會擺平所有的阻礙為你獻上一捲衛生紙表達感激!
接下來就是萬年曆小程式的內容(使用js編寫):
1:HTML層
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>日曆</title> 6 <link rel="stylesheet" type="text/css" href="Calendar.css"> 7 <script type="text/javascript" src="Calendar.js"></script> 8 </head> 9 <body> 10 <div id="calendar" class="calendar"> 11 <div class="prev"> 12 <button id="prev_M">上個月</button> 13 </div> 14 15 <span id="month"></span>月<span id="year"></span>年 16 17 <div class="next"> 18 <button id="next_M">下個月</button> 19 </div> 20 </div> 21 22 <div style="clear:both"></div> 23 <!--日曆主體--> 24 <div id="calendar_weektitle"></div> 25 <div id="calendar_weekday"></div> 26 <div style="clear:both;"></div> 27 <!--報名信息--> 28 <div id="regis"><span id="reg_i" style="color:green;">●</span> 是否可報名</div> 29 <div id="instalment">月份/批次</div> 30 </body> 31 </html>
2:CSS ceng
1 .calendar{ 2 font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif; 3 width: 490px; 4 text-align: center; 5 overflow: hidden; 6 } 7 #calendar_weekday{ 8 width: 500px; 9 } 10 #calendar_weektitle{ 11 width: 500px; 12 } 13 .prev{ 14 cursor: pointer; 15 float: left; 16 /* padding-right: px;*/ 17 } 18 .next{ 19 cursor: pointer; 20 float: right; 21 /* padding-right: px;*/ 22 } 23 24 #calendar_weekday div,#calendar_weektitle div{ 25 border-bottom: 1px solid #cccccc; 26 font-size: 11px; 27 font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; 28 } 29 #calendar_weekday div{ 30 color: #adadad; 31 } 32 #calendar_weekday > div:hover{ 33 background-color: #ffcd3c; 34 opacity: .5; 35 } 36 #regis,#instalment{ 37 line-height: 35px; 38 font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; 39 font-size: 14px; 40 width: 490px; 41 padding-left: 20px; 42 } 43 #regis{ 44 background-color: #ffd96a; 45 height: 40px; 46 } 47 #instalment{ 48 border-bottom: 1px solid red; 49 /*line-height: 30px;*/ 50 height: 36px; 51 }
3:javascript ceng !important
1 /** 2 * Created by heart on 2017/4/26. 3 */ 4 window.onload = function(){ 5 //為日曆寫入月份頭部 6 function Calendar(){ 7 var weeks = ['日', '一', '二', '三', '四', '五', '六']; 8 for(i = 0; i < weeks.length; i++){ 9 var div = document.createElement('div'); 10 div.id = 'week_' + i; 11 div.innerHTML = weeks[i]; 12 div.style.width = '14%'; 13 div.style.height = '35px'; 14 div.style.lineHeight = div.style.height; 15 div.style.backgroundColor = '#ccc'; 16 div.style.float = 'left'; 17 div.style.textAlign = 'center'; 18 document.getElementById('calendar_weektitle').appendChild(div); 19 } 20 alert("1"); 21 } 22 23 //構造原型對象 24 Calendar.prototype = { 25 //取閏年函數 26 isLeap : function(year){ 27 return (year % 100 !== 0 && year % 4 == 0) || (year % 400 == 0); 28 }, 29 //返回本年本月的天數 30 getDaysNum : function(year, month) { 31 var num = 31; //大月 32 switch (month) { 33 case '2': 34 num = this.isLeap(year) ? 29 : 28; 35 break; //小月 36 case 4: 37 case 6: 38 case 9: 39 case 11: 40 num = 30; 41 break; 42 } 43 return num; 44 }, 45 //返回本月的第一天是周幾 46 getWeek : function(year, month){ 47 var d = new Date(); 48 // var m=d.getMonth()+1; 49 // var y=d.getYear(); 50 51 d.setYear(year); 52 d.setMonth(month-1); 53 d.setDate(1); 54 var weeks = ['7', '1', '2', '3', '4', '5', '6']; 55 return weeks[d.getDay()]; 56 57 }, 58 //核心函數,寫入日曆 59 show : function(year, month){ 60 var weekFirstDay = this.getWeek(year, month); 61 var dayCount = this.getDaysNum(year, month); 62 console.log(weekFirstDay); 63 //得到本月頭是周幾,併在前面插入空天數 64 if(weekFirstDay != '7'){ 65 for(var i = 0; i < weekFirstDay; i++){ 66 var div_1 = document.createElement('div'); 67 div_1.style.cursor = 'pointer'; 68 div_1.innerHTML = ''; 69 div_1.style.width = '14%'; 70 div_1.style.height = '40px'; 71 // div_1.style.lineHeight = div_1.style.height / 2; 72 div_1.style.float = 'left'; 73 div_1.style.textAlign = 'center'; 74 document.getElementById('calendar_weekday').appendChild(div_1); 75 } 76 } 77 //得到本月的天數,按規則格式註入天數 78 for(i = 0; i < dayCount; i++){ 79 var div_2 = document.createElement('div'); 80 div_2.style.cursor = 'pointer'; 81 div_2.id = 'day_' + year + '_' + month + '_' + (i + 1); 82 console.log(div_2.id); 83 div_2.innerHTML = i + 1 + '<br />'; 84 div_2.style.width = '14%'; 85 div_2.style.height = '40px'; 86 // div_2.style.lineHeight = div_2.style.height / 2; 87 div_2.style.float = 'left'; 88 div_2.style.textAlign = 'center'; 89 document.getElementById('calendar_weekday').appendChild(div_2); 90 } 91 92 }, 93 //跳轉上個月,月份減一 94 PreMonth: function() { 95 this.PreDraw(new Date(this.Year, this.Month - 2, 1)); 96 }, 97 //跳轉下個月,月份加一 98 NextMonth: function() { 99 this.PreDraw(new Date(this.Year, this.Month, 1)); 100 }, 101 //重繪 102 PreDraw: function(date) { 103 this.Year = date.getFullYear(); 104 this.Month = date.getMonth() + 1; 105 this.Draw(); 106 } 107 }; 108 alert('2'); 109 //對象實例化 110 Calen = new Calendar(); 111 //獲取本地時間 112 var data= new Date(); 113 m = data.getMonth()+1; 114 y =data.getFullYear(); 115 d = data.getDate(); 116 //寫入本月天數 117 Calen.show(y,m); 118 var today = document.getElementById('day_'+ y + '_'+ m + '_' + d); 119 today.style.backgroundColor = '#ffcd3c'; 120 121 document.getElementById("year").innerHTML = y; 122 document.getElementById("month").innerHTML = m; 123 alert('3'); 124 //跳轉到下個月 125 document.getElementById("next_M").onclick = function(){ 126 var div=document.getElementById("calendar_weekday"); 127 div.innerHTML = ""; 128 if(m > 0&&m < 12){ 129 m += 1; 130 }else if(m > 1){ 131 m = 1; 132 y += 1; 133 }else if(m == 12){ 134 m = 1; 135 y += 1; 136 } 137 Calen.show(y, m); 138 document.getElementById("year").innerHTML = y; 139 document.getElementById("month").innerHTML = m; 140 }; 141 142 //跳轉到上一月 143 document.getElementById("prev_M").onclick = function(){ 144 var div = document.getElementById("calendar_weekday"); 145 div.innerHTML=""; 146 if(m > 1 && m < 12){ 147 m -= 1; 148 }else if(m <= 1){ 149 m = 12; 150 y-=1; 151 }else if(m == 12){ 152 m -= 1; 153 } 154 Calen.show(y, m); 155 document.getElementById("year").innerHTML = y; 156 document.getElementById("month").innerHTML = m; 157 }; 158 };
對於js程式,我使用的是javascript原型對象開發模式,個人覺得在較複雜的程式中它相對函數式模式更加可視直觀。相關的細節描述已在代碼的註釋中標識;可能在動態樣式上有所不足;可能需要在功能上有所補充;代碼可取走分析使用。