使用JavaScript编写日历的程序代码
昨天，我接到的公司老司机的命令，要求我完成一个万年历，目的是想通过日历来利用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原型对象开发模式，个人觉得在较复杂的程序中它相对函数式模式更加可视直观。相关的细节描述已在代码的注释中标识；可能在动态样式上有所不足；可能需要在功能上有所补充；代码可取走分析使用。
