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傳價格