用原生js製作日曆
阿新 • • 發佈:2019-02-14
先說說 我做這的過程吧。剛開始寫真的煩,然後各種除錯,尋找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>標籤用來選擇你需要的日期比較簡單就不贅述了。寫部落格的第三次加油勉勵