1. 程式人生 > >用原生js製作日曆

用原生js製作日曆

先說說 我做這的過程吧。剛開始寫真的煩,然後各種除錯,尋找bug。最終老天不負有心人完成了製作。這是伴隨著痛苦與喜悅的。(文采一塌糊塗就寫到這吧^_^)

下面說一說日曆,日曆的製作主要應用了js的Date物件(不太瞭解的可以去查閱一下),其中有個重要知識點就是新建new Date()使時,把日子設為0;例如 var myDate=new Date(2018.7.0);var myDate=myDate.getDate(),它的返回值是7月的最後一天也就是31,可以用他來確定一個月的天數。然後得到這個月的第一天是周幾;下面是程式碼:

   //獲取某月的總天數
           function fungetmonth(year,month)
           {
            var mydate=new Date(year,month,0);//0的目的是獲取某月的天數
             mydate=mydate.getDate();
            return mydate;
           }

//把資料儲存在二維數組裡
           function  fungetdata(year,month){
               var array=new Array()
               for(var i=0;i<7;i++){
                   array[i]=new Array(7);}
               var mydate=new Date(year,month-1,1);
                mydate=mydate.getDay();
                var week=fungetmonth(year,month);
                var day=1;
                array[0][0]="sun";
                array[0][1]="Mon";
                array[0][2]="Tue";
                array[0][3]="Wed";
                array[0][4]="Thu";
                array[0][5]="Fri";
                array[0][6]="Sat";
                var r,c,m;
                //確定第二行的內容
                for(c=mydate;c<7;c++){
                      array[1][c]=day;
                      day++;
                }
                //把其餘的天數加入到陣列中
                var r,c;
                for(r=2;r<7;r++){
                    for(c=0;c<7;c++)
                    //函式作用是將其餘的天數加入到表格中其中week是最一天
                    {   if(day<=week)
                        {array[r][c]=day;
                        day++;}
                    }
                }
                return array;
            }

這是把資料存到二維數組裡由於星期數正好對應getdate()的返回值,依照行數和列數儲存在數組裡,然後遍歷這個陣列把它輸入到表格。

儲存到陣列之後就要把資料輸入到HTML中來顯示到頁面上,這裡我用的是document.write()(jQuery剛學 。。。)

//把陣列中的資料新增到頁面中
            function funadddata(year,month){
                var array= fungetdata(year,month);
                var r,c;
                //第一行
                document.write("<table><tr>");
                document.write("<td>"+array[0][0]+"</td>");
                document.write("<td>"+array[0][1]+"</td>");
                document.write("<td>"+array[0][2]+"</td>");
                document.write("<td>"+array[0][3]+"</td>");
                document.write("<td>"+array[0][4]+"</td>");
                document.write("<td>"+array[0][5]+"</td>");
                document.write("<td>"+array[0][6]+"</td>");
                document.write("</tr>");
                //除第一行的其它行
                for(r=1;r<7;r++){
                    document.write("<tr>");
                    for(c=0;c<7;c++){
                        var funid="td"+r+c;
                        document.write("<td id="+funid+">");
                        if(array[r][c]>0){
                        document.write(""+array[r][c]+"");
                        }else{
                            document.write(" ");
                        }
                        document.write("</td>");
                        }
                        document.write("</tr>");
                }
                
                document.write("</table>");
            }
         

你也不可能是隻顯示某年某月吧下面就是更新資料

//更新資料
            function funupdatedata(year,month){
                var r,c;
                var array=fungetdata(year,month);//把資料寫入陣列中
                for(r=1;r<7;r++){
                    for(c=0;c<7;c++){
                        var funid="td"+r+c;
                        if(array[r][c]>0)
                        { document.getElementById(""+funid+"").innerText=array[r][c];}
                        else{
                            document.getElementById(""+funid+"").innerText="";}
                        }
                    }
                }

前面也分析了一點 把陣列的下標當做單元格中即標籤的ID,然後用document.getElementById("").innerText來修改內容。最後我這裡用的是<select>標籤用來選擇你需要的日期比較簡單就不贅述了。寫部落格的第三次加油勉勵