用原生js製作日曆

2021-08-20 18:00:05 字數 1498 閱讀 3853

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

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

//獲取某月的總天數

function fungetmonth(year,month)

//把資料儲存在二維陣列裡

function fungetdata(year,month)

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++)

//把其餘的天數加入到陣列中

var r,c;

for(r=2;r<7;r++)}}

return array;

}

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

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

//把陣列中的資料新增到頁面中

function funadddata(year,month)else

document.write("");

}document.write("");

}document.write("");

}

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

//更新資料

function funupdatedata(year,month)

else}}

}

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

初來乍到 原生js寫日曆

js日常 思路 1.獲取到每個月具體的天數 2.獲取每天具體的星期值 下面展示一些html 塊。out ppp prev 上一月 span nian span next 下一月 span p yue p week ul date ul div 簡單的大體結構 外面一層div套住 ul,li out ...

JS日曆製作獲取時間

1.直接獲取 var mydate new date mydate.getyear 獲取當前年份 2位 mydate.getfullyear 獲取完整的年份 4位,1970 mydate.getmonth 獲取當前月份 0 11,0代表1月 mydate.getdate 獲取當前日 1 31 myd...

利用js製作簡單的動態日曆

doctype html en utf 8 title title calendar item item hover style head calendar var year 2020 var month 12 從1900年1月1日到當前年份月份上乙個月的總天數 var totaldays 0 目標...