Outcome:
Code:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{margin: 10 10 10 10;padding: 0;list-style: none;} 8 #rili{ 9 float: left;border: 1px solid black; 10 width: 280px; 11 } 12 #n{ 13 width: 100%;height: 20px; 14 line-height: 20px;text-align: center; 15 } 16 .pr{float: left;cursor: pointer;} 17 .nt{float: right;cursor: pointer;} 18 #l{ 19 width: 100%;height: 20px;line-height: 20px;float: left; 20 } 21 #l span{ 22 float: left;width: 40px;height: 100%;text-align: center;line-height: 20px; 23 } 24 #all li{ 25 float: left;width: 40px;height: 40px;text-align: center;line-height: 40px; 26 } 27 #all .red{ 28 color: red; 29 } 30 31 </style> 32 </head> 33 <body> 34 35 <script type="text/javascript"> 36 37 var innerHtml = [ 38 "<div id='rili'>", 39 "<div id='n'><span class='pr' id='pr'>prev</span><span id='year'>2016</span>年<span id='Month'>9</span>月<span id='dayNode'>30</span>日<span class='nt' id='nt'>next</span></div>", 40 "<div id='l'>", 41 "<span>一</span>", 42 "<span>二</span>", 43 "<span>三</span>", 44 "<span>四</span>", 45 "<span>五</span>", 46 "<span style='color:red'>六</span>", 47 "<span style='color:red'>日</span>", 48 "</div>", 49 "<ul id='all'>", 50 "</ul>", 51 "</div>" 52 ].join(''); 53 54 document.body.innerHTML = innerHtml; 55 window.setMonth = new Date().getMonth(); 56 57 pr.onclick = function(){ 58 setMonth--; 59 setRl(); 60 } 61 nt.onclick = function(){ 62 setMonth++; 63 setRl(); 64 } 65 setRl(); 66 function setRl(){ 67 68 var oDate = new Date(); 69 oDate.setMonth(setMonth); 70 var NowMonth = oDate.getMonth(); 71 var NowYear = oDate.getFullYear(); 72 var NowDays = oDate.getDate(); 73 var oldMonth = setMonth%12; 74 75 if(oldMonth < 0){ 76 oldMonth = (oldMonth % 12) + 12; 77 } 78 var oldM = setMonth % 12; 79 if(oldM < 0){ 80 oldM = (oldM % 12) + 12; 81 } 82 83 year.innerHTML = NowYear; 84 Month.innerHTML = NowMonth+1; 85 dayNode.innerHTML = NowDays; 86 87 oldMonth++; 88 oDate.setMonth(oldMonth); 89 90 // 0 represents the last day of the last month 91 oDate.setDate(0); 92 var allDate = oDate.getDate(); 93 94 95 oDate.setMonth(oldM); 96 oDate.setDate(1); 97 98 // Sunday is known in the Chinese calendar as the 7th day in the weeks, while in the western calendar it is the first day. 99 function toDay(Num){ 100 return Num==0 ? 7:Num; 101 } 102 var getDay = toDay(oDate.getDay()); 103 104 all.innerHTML = ''; 105 //append blank spaces 106 for(var i = 0;i < getDay-1;i++){ 107 var oLi = document.createElement('li'); 108 all.appendChild(oLi); 109 } 110 111 112 //append dates 113 for(var i = 0;i < allDate;i++){ 114 var oLi = document.createElement('li'); 115 oLi.innerHTML = i+1; 116 all.appendChild(oLi); 117 } 118 119 //make the weekends red 120 for(var i=0;i < all.children.length;i++){ 121 if(i%7 == 5 || i%7 ==6){ 122 all.children[i].className = 'red'; 123 } 124 } 125 } 126 127 </script> 128 </body> 129 </html>