WEB前端组件思想【日历】

1 window.onload=function()
2 {
3     var ainput = document.getElementsByTagName("input");
4     var odiv = document.getElementById("div1");
5     var oNowTime = document.getElementById("nowTime");
6     var oNextTime = document.getElementById("nextTime");
7     //=============获取span   左边 右边的  标题年 月  表示长度【i】
8     var aNowspan = oNowTime.getElementsByTagName('span');
9     var aNextspan = oNextTime.getElementsByTagName('span');
10     var aTd = odiv.getElementsByTagName("td");
11     var bBtn =true;
12     
13     //确认点击事件
14     ainput[2].onclick=function()
15 {
16         var oDate = newDate();
17         if(bBtn)
18 {
19             odiv.style.display="block";
20             //判断时间   当12月是   后面一个月是1月份
21             if (oDate.getMonth()+1 == 12) {
22              showDate(oNowTime,oDate.getFullYear(),oDate.getMonth()+1,true);
23              showDate(oNextTime,oDate.getFullYear()+1,1);
24             }else{
25             showDate(oNowTime,oDate.getFullYear(),oDate.getMonth()+1,true);
26             showDate(oNextTime,oDate.getFullYear(),oDate.getMonth()+2);
27 }
28             //添加方法  当前日期显示红色    后10天显示蓝色
29             console.log("几号"+oDate.getDate());
30 showColor(oDate.getDate());
31 showBtn();
32             
33             
34             
35         }else{
36             odiv.style.display="none";
37 }
38         bBtn = !bBtn;  //真假切换
39         
40 };
41     //是否生成容器到  哪个容器里面  左边  右边
42     functionshowDate(obj,year,month,bBtn)
43 {
44         //点击只限制生成一次    生成 日期
45         //获取当前时间
46 
47         var  oDate = newDate();
48         
49         var dayNum = 0;  //这个月一共多少天;
50         if(!obj.bBtn)
51 {
52             obj.oTtiel = document.createElement("div");
53             obj.oTtiel.className = "title";
54 obj.appendChild(obj.oTtiel);
55             
56             var otable = document.createElement("table");
57             var othead = document.createElement("tHead");  //改错
58             var otr = document.createElement("tr");
59             var arr = ["周一","周二","周三","周四","周五","周六","周日"];
60             for (var i = 0; i < 7; i++) {
61                 var oth= document.createElement("th");
62                 oth.innerHTML =arr[i];
63                 if(i==5 || i==6)
64 {
65                     oth.className="red";
66 }
67                 otr.appendChild(oth); //改错
68 }
69                 
70 othead.appendChild(otr);
71 otable.appendChild(othead);
72             
73             var otbody = document.createElement("tbody");  //改错
74             for (var i = 0; i < 6; i++) {
75                 var otr = document.createElement("tr");
76                 for (var j= 0; j< 7; j++) {
77                     var otd= document.createElement("td");
78 otr.appendChild(otd);
79 }
80                 
81 otbody.appendChild(otr);
82 }
83 otable.appendChild(otbody);
84 obj.appendChild(otable);
85             obj.bBtn = true
86 }
87         //年月     蓝色头部
88         obj.oTtiel.innerHTML = (bBtn ? '<div class="title"><div class="l"><span>'+(month-1)+'</span>月</div>' :'<div class="title"><div class="r"><span>'+(month+1)+'</span>月</div>')+'<div class="c"><span>'+year+'</span>年<span>'+month+'</span>月</div>';
89         
90         var aTd = obj.getElementsByTagName("td");  //误区  如果 obj改为 doucument 则只能显示一张日历
91         //每次都要清空一次  再生产  为什么？？  每次点击都是要更新日历内容  如果换一天了 更新一天的日历所以必须清空重新生成
92         for (var i = 0; i < aTd.length; i++) {
93             aTd[i].innerHTML = "";
94 }
95         
96         if(month ==1 || month==3 || month ==5 || month ==7 || month==8 || month==10 || month==12)
97 {
98              dayNum  = 31;
99         }else if (month == 4 || month == 6 || month == 9 || month == 11){
100              dayNum  = 30;
101         }else{ //2月份闰年 判断
102              if(month == 2 &&isleeyear(year)){
103                  dayNum =29;
104              }else{
105                  dayNum = 28;
106 }
107 }
108          
109 oDate.setFullYear(year);
110         oDate.setMonth(month-1);
111         oDate.setDate(1);  //日期
112 console.log(oDate.getDay());
113 console.log(year)
114 console.log(month)
115       
116         switch(oDate.getDay())
117 {
118              case 0:
119              for(var i=0; i<dayNum;i++)
120 {
121                  aTd[i+6].innerHTML = i+1;
122 }
123              break;   
124               case 1:
125              for(var i=0; i<dayNum;i++)
126 {
127                  aTd[i].innerHTML = i+1;
128 }
129              break;   
130               case 2:
131              for(var i=0; i<dayNum;i++)
132 {
133                  aTd[i+1].innerHTML = i+1;
134 }
135              break;   
136               case 3:
137              for(var i=0; i<dayNum;i++)
138 {
139                  aTd[i+2].innerHTML = i+1;
140 }
141              break;   
142               case 4:
143              for(var i=0; i<dayNum;i++)
144 {
145                  aTd[i+3].innerHTML = i+1;
146 }
147              break;  
148                case 5:
149              for(var i=0; i<dayNum;i++)
150 {
151                  aTd[i+4].innerHTML = i+1;
152 }
153              break;   
154                case 6:
155              for(var i=0; i<dayNum;i++)
156 {
157                  aTd[i+5].innerHTML = i+1;
158 }
159              break;   
160             
161 }
162         //判断当前月份是否是1月  则 前面一个月份 是 year-1    月份是12  右边  12  下一个月 为1月
163         if(month==1 &&bBtn){
164             //代表左边一个日历
165             obj.oTtiel.getElementsByTagName('span')[0].innerHTML =12;
166             
167             
168         }else if(month==12 && !bBtn){
169             obj.oTtiel.getElementsByTagName('span')[0].innerHTML =1;
170 }
171         
172         
173         
174         
175 }
176     //闰年判断
177      functionisleeyear(year)
178 {
179            if (year %4 == 0 && year%100 !=0) {
180                  return true;
181            }else if(year%400==0){
182                  return true;
183            }else{
184                 return false;
185 }
186 }
187      
188      functionshowColor(date)
189 {
190          //储存所有带数值的td
191          var oDate = newDate();
192            var result =[];
193            //正则  传入 当前 日期 几号
194            var re = new RegExp(''+date+'(<p>)*');
195            var index = 0;
196            var bBtn = true;
197            for (var i = 0; i <aTd.length; i++) {
198                if (aTd[i].innerHTML != "") {
199 result.push(aTd[i])
200 }
201 }
202            //判断当前 日   月份  是否存在  当前  日历表中
203            if (aNowspan[1].innerHTML == oDate.getFullYear()  && aNowspan[2].innerHTML == oDate.getMonth()+1){
204                    for (var i = 0; i < result.length; i++) {
205                         if (re.test(result[i].innerHTML) &&bBtn) {
206                             result[i].className="red";
207                             index =i;
208                             bBtn = false;
209 }
210 }
211                  //寻找  当前日期后面的 10个日子  变身蓝色
212 console.log(index);
213                   //for循环的另一种思想
214                   var len = index +11;
215                  for(var i=index +1;index+1<len;index++){
216                      result[index+1].className = "blue";
217 }
218                  
219                  
220            }else{
221                   for (var i = 0; i < result.length; i++) {
222                       result[i].className="";
223 }
224 }
225            
226            
227 }
228     functionshowBtn()
229 {
230          //获取左边月份  
231          var leftM = parseInt(aNowspan[0].innerHTML);  
232          var leftY = parseInt(aNowspan[1].innerHTML);
233          
234          console.log(aNowspan[0].innerHTML)
235          //获取  年份
236          var rightM =parseInt(aNextspan[0].innerHTML);
237          var rightY =parseInt(aNextspan[1].innerHTML);
238          //判断 当前日历   下一个点击按钮
239          aNowspan[0].parentNode.onclick=function()
240 {
241              //到12月份  判断
242              if (leftM ==12) {
243              showDate(oNowTime,leftY-1,leftM,true);
244              showDate(oNextTime,leftY,1);
245                  
246              }else{
247              showDate(oNowTime,leftY,leftM,true);
248              showDate(oNextTime,leftY,leftM+1);
249 }
250              
251 showBtn();
252              showColor(new Date().getDate()); //当前日期去验证是否在同一张日历
253 }
254          aNextspan[0].parentNode.onclick=function()
255 {
256              //到12月份  判断
257              if (rightM ==1) { 
258              showDate(oNowTime,rightY,12,true);
259              showDate(oNextTime,rightY+1,rightM);
260                  
261              }else{
262              showDate(oNowTime,rightY,rightM-1,true);
263 showDate(oNextTime,rightY,rightM);
264 }
265              
266 showBtn();
267              showColor(new Date().getDate()); //当前日期去验证是否在同一张日历
268              
269 }
270          
271 }
272     
273     
274     
275 }

1 <body>
2 <input type="text" /><input type="text" /><input type="button"value="确定" />
3 <div id="div1">
4     <div id="nowTime">
45     </div>
46     <div id="nextTime">
47         <!--<div class="title">
48 <div class="r"><span>3</span>月</div>
49 <div class="c"><span>2000</span>年<span>3</span>月</div>
50 </div>
51 <table>
52 <thead>
53 <tr>
54 <th>周一</th>
55 <th>周二</th>
56 <th>周三</th>
57 <th>周四</th>
58 <th>周五</th>
59 <th class="red">周六</th>
60 <th class="red">周日</th>
61 </tr>
62 </thead>
63 <tbody>
64 <tr>
65 <td>1</td>
66 <td>1</td>
67 <td>1</td>
68 <td>1</td>
69 <td>1</td>
70 <td>1</td>
71 <td>1</td>
72 </tr>
73 <tr>
74 <td>1</td>
75 <td>1</td>
76 <td>1</td>
77 <td>
78 1
79 <p>200元</p>
80 </td>
81 <td>1</td>
82 <td>1</td>
83 <td>1</td>
84 </tr>
85 </tbody>
86 </table>-->
87     </div>
88 </div>
89 
90     </body>