WEB前端组件思想【日历】

DEMO2：

思路：首先获取元素节点元素--->根据点击事件隐藏显示元素--->建立showdate方法（判断12月 则右边年份+1，月份1 ）--->还要设置btn开关 防止多次重建--->根据元素清空 for循环列 行、把 th tr thead加入table--->根据判断每一次点击进入月份必须先清空一次td

 判断月份大小及闰年---> switch循环加入日期

难点：整理下再写

代码部分：

  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 = new Date();
 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     function  showDate(obj,year,month,bBtn)
 43     {
 44         //点击只限制生成一次    生成 日期
 45         //获取当前时间
 46 
 47         var  oDate = new Date();
 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      function isleeyear(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      function showColor(date)
189      {
190          //储存所有带数值的td
191          var oDate = new Date();
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     function showBtn()
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 }

 HTML部分：

 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>

还未完成功能：

点击日历 把日历日期  赋值到 选项框中

在日期中 ajax传价格

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/h5monkey/p/6009018.html