WEB前端组件思想【日历】

DEMO2：

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

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

难点：整理下再写

代码部分：

window.onload=function()
{
    var ainput = document.getElementsByTagName("input");
    var odiv = document.getElementById("div1");
    var oNowTime = document.getElementById("nowTime");
    var oNextTime = document.getElementById("nextTime");
    //=============获取span   左边 右边的  标题年 月  表示长度【i】
    var aNowspan = oNowTime.getElementsByTagName('span');
    var aNextspan = oNextTime.getElementsByTagName('span');
    var aTd = odiv.getElementsByTagName("td");
    var bBtn =true;
    
    //确认点击事件
    ainput[2].onclick=function()
    {
        var oDate = new Date();
        if(bBtn)
        {
            odiv.style.display="block";
            //判断时间   当12月是   后面一个月是1月份
            if (oDate.getMonth()+1 == 12) {
             showDate(oNowTime,oDate.getFullYear(),oDate.getMonth()+1,true);
             showDate(oNextTime,oDate.getFullYear()+1,1);
            }else{
            showDate(oNowTime,oDate.getFullYear(),oDate.getMonth()+1,true);
            showDate(oNextTime,oDate.getFullYear(),oDate.getMonth()+2);
            }
            //添加方法  当前日期显示红色    后10天显示蓝色
            console.log("几号"+oDate.getDate());
            showColor(oDate.getDate());
            showBtn();
            
            
            
        }else{
            odiv.style.display="none";
        }
        bBtn = !bBtn;  //真假切换
        
    };
    //是否生成容器到  哪个容器里面  左边  右边
    function  showDate(obj,year,month,bBtn)
    {
        //点击只限制生成一次    生成 日期
        //获取当前时间

        var  oDate = new Date();
        
        var dayNum = 0;  //这个月一共多少天;
        if(!obj.bBtn)
        {
            obj.oTtiel = document.createElement("div");
            obj.oTtiel.className = "title";
            obj.appendChild(obj.oTtiel);
            
            var otable = document.createElement("table");
            var othead = document.createElement("tHead");  //改错
            var otr = document.createElement("tr");
            var arr = ["周一","周二","周三","周四","周五","周六","周日"];
            for (var i = 0; i < 7; i++) {
                var oth= document.createElement("th");
                oth.innerHTML = arr[i];
                if(i==5 || i==6)
                {
                    oth.className="red";
                }
                otr.appendChild(oth); //改错
            }
                
                othead.appendChild(otr);
                otable.appendChild(othead);
            
            var otbody = document.createElement("tbody");  //改错
            for (var i = 0; i < 6; i++) {
                var otr = document.createElement("tr");
                for (var j= 0; j< 7; j++) {
                    var otd= document.createElement("td");
                    otr.appendChild(otd);
                }
                
                otbody.appendChild(otr);
            }
            otable.appendChild(otbody);
            obj.appendChild(otable);
            obj.bBtn = true
        }
        // 年月     蓝色头部
        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>';
        
        var aTd = obj.getElementsByTagName("td");  //误区  如果 obj改为 doucument 则只能显示一张日历
        //每次都要清空一次  再生产  为什么？？  每次点击都是要更新日历内容  如果换一天了 更新一天的日历所以必须清空重新生成
        for (var i = 0; i < aTd.length; i++) {
            aTd[i].innerHTML = "";
        }
        
        if(month ==1 || month==3 || month ==5 || month ==7 || month==8 || month==10 || month==12)
        {
             dayNum  = 31;
        }else if (month == 4 || month == 6 || month == 9 || month == 11){
             dayNum  = 30;
        }else{ //2月份闰年 判断
             if(month == 2 && isleeyear(year)){
                 dayNum =29;
             }else{
                 dayNum = 28;
             }
        }
         
        oDate.setFullYear(year);
        oDate.setMonth(month-1);
        oDate.setDate(1);  //日期
         console.log(oDate.getDay());
        console.log(year)
        console.log(month)
      
        switch(oDate.getDay())
        {
             case 0:
             for(var i=0; i<dayNum;i++)
             {
                 aTd[i+6].innerHTML = i+1;
             }
             break;   
              case 1:
             for(var i=0; i<dayNum;i++)
             {
                 aTd[i].innerHTML = i+1;
             }
             break;   
              case 2:
             for(var i=0; i<dayNum;i++)
             {
                 aTd[i+1].innerHTML = i+1;
             }
             break;   
              case 3:
             for(var i=0; i<dayNum;i++)
             {
                 aTd[i+2].innerHTML = i+1;
             }
             break;   
              case 4:
             for(var i=0; i<dayNum;i++)
             {
                 aTd[i+3].innerHTML = i+1;
             }
             break;  
               case 5:
             for(var i=0; i<dayNum;i++)
             {
                 aTd[i+4].innerHTML = i+1;
             }
             break;   
               case 6:
             for(var i=0; i<dayNum;i++)
             {
                 aTd[i+5].innerHTML = i+1;
             }
             break;   
            
        }
        //判断当前月份是否是1月  则 前面一个月份 是 year-1    月份是12  右边  12  下一个月 为1月
        if(month==1 && bBtn){
            //代表左边一个日历
            obj.oTtiel.getElementsByTagName('span')[0].innerHTML =12;
            
            
        }else if(month==12 && !bBtn){
            obj.oTtiel.getElementsByTagName('span')[0].innerHTML =1;
        }
        
        
        
        
    }
    //闰年判断
     function isleeyear(year)
     {
           if (year %4 == 0 && year%100 !=0) {
                 return true;
           }else if(year%400==0){
                 return true;
           }else{
                return false;
           }
     }
     
     function showColor(date)
     {
         //储存所有带数值的td
         var oDate = new Date();
           var result =[];
           //正则  传入 当前 日期 几号
           var re = new RegExp(''+date+'(<p>)*');
           var index = 0;
           var bBtn = true;
           for (var i = 0; i <aTd.length; i++) {
               if (aTd[i].innerHTML != "") {
                   result.push(aTd[i])
               }
           }
           //判断当前 日   月份  是否存在  当前  日历表中
           if (aNowspan[1].innerHTML == oDate.getFullYear()  && aNowspan[2].innerHTML == oDate.getMonth()+1){
                   for (var i = 0; i < result.length; i++) {
                        if (re.test(result[i].innerHTML) && bBtn) {
                            result[i].className="red";
                            index = i;
                            bBtn = false;
                        }
                  }
                 //寻找  当前日期后面的 10个日子  变身蓝色
                 console.log(index);
                  //for循环的另一种思想
                  var len = index +11;
                 for(var i=index +1;index+1<len;index++){
                     result[index+1].className = "blue";
                 }
                 
                 
           }else{
                  for (var i = 0; i < result.length; i++) {
                      result[i].className="";
                  }
           }
           
           
     }
    function showBtn()
     {
         //获取左边月份  
         var leftM = parseInt(aNowspan[0].innerHTML);  
         var leftY = parseInt(aNowspan[1].innerHTML);
         
         console.log(aNowspan[0].innerHTML)
         //获取  年份
         var rightM =parseInt(aNextspan[0].innerHTML);
         var rightY =parseInt(aNextspan[1].innerHTML);
         //判断 当前日历   下一个点击按钮
         aNowspan[0].parentNode.onclick=function()
         {
             //到12月份  判断
             if (leftM ==12) {
             showDate(oNowTime,leftY-1,leftM,true);
             showDate(oNextTime,leftY,1);
                 
             }else{
             showDate(oNowTime,leftY,leftM,true);
             showDate(oNextTime,leftY,leftM+1);
             }
             
             showBtn();
             showColor(new Date().getDate()); //当前日期去验证是否在同一张日历
         }
         aNextspan[0].parentNode.onclick=function()
         {
             //到12月份  判断
             if (rightM ==1) { 
             showDate(oNowTime,rightY,12,true);
             showDate(oNextTime,rightY+1,rightM);
                 
             }else{
             showDate(oNowTime,rightY,rightM-1,true);
             showDate(oNextTime,rightY,rightM);
             }
             
             showBtn();
             showColor(new Date().getDate()); //当前日期去验证是否在同一张日历
             
         }
         
     }
    
    
    
}

 HTML部分：

<body>
<input type="text" /><input type="text" /><input type="button" value="确定" />
<div id="div1">
    <div id="nowTime">
    </div>
    <div id="nextTime">
        <!--<div class="title">
            <div class="r"><span>3</span>月</div>
            <div class="c"><span>2000</span>年<span>3</span>月</div>
        </div>
        <table>
            <thead>
                <tr>
                    <th>周一</th>
                    <th>周二</th>
                    <th>周三</th>
                    <th>周四</th>
                    <th>周五</th>
                    <th class="red">周六</th>
                    <th class="red">周日</th>
                </tr>
            </thead>
            <tbody>
                   <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>
                        1
                        <p>200元</p>
                    </td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
            </tbody>
        </table>-->
    </div>
</div>

    </body>

还未完成功能：

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

在日期中 ajax传价格