? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 用原生js制作日歷

?

? ? ? 1，先在html內容寫好日歷的樣式框架

<div class="container"><header><div class="left">上個月</div><div class="center"></div><div class="right">下個月</div></header><div class="weakend"><ul><li>周日</li><li>周一</li><li>周二</li><li>周三</li><li>周四</li><li>周五</li><li>周六</li></ul></div><div class="month"></div></div>

month部分用js動態生成

let left = document.querySelector('.left');let center = document.querySelector('.center');let right = document.querySelector('.right');let ulmonth = document.querySelector('.month');

先獲取到需要操作的Dom元素

// 獲取當前時間let nowDate = new Date();// 得到當前的年份let year = nowDate.getFullYear(); // 得到當前的月份let mm = nowDate.getMonth()+1;// 將當前時間賦值給點擊要操作的時間let currentDate = nowDate;

定義一個方法判斷是否為閏年

function isLeepYear(year){if(year%4===0&&year%100!==0||year%400===0){return true;}return false;}

定義一個方法判斷當前月一共有多少天

// 判斷當前查看的這一個月一共有多少天function MonthAllDay(year,month){switch (month) {case 1:case 3: case 5: case 7: case 8: case 10: case 12:return 31;break;case 4: case 6: case 9: case 11:return 30;break;default:if(isLeepYear(year)){return 29;}return 28;break;}}

定義一個方法得到當前月份的第一天

// 得到當前月的第一天function getMonthOne(year,month){ let currentDate = new Date(year,month-1,1);let day = currentDate.getDay();return day;}

根據上面對的方法，定義一個showDate（）方法將日歷添加到網頁上

// 根據當前傳過來的時間繪制日歷function showDate(currentDate){let strli = ''let year = currentDate.getFullYear();let mm = currentDate.getMonth()+1;let allDay = MonthAllDay(year,mm);let day = getMonthOne(year,mm);let ul = document.createElement('ul');for(let i=1;i<=day;i++){let li = document.createElement('li');ul.append(li);}for(let i=1;i<=allDay;i++){let li = document.createElement('li');ul.append(li);li.innerText = i;}ulmonth.innerHTML = ''ulmonth.append(ul);center.innerText = `${year}年${mm}月`}

當點擊上一個月時，將月份減一，調用showDate函數，得到上一個月的日歷添加到網頁中

left.addEventListener('click',function(){let year = currentDate.getFullYear();let mm = currentDate.getMonth();let dd = currentDate.getDate();mm--;console.log(mm,dd);currentDate = new Date(year,mm,dd);showDate(currentDate);})

但點擊下一個月時，將月份加一，調用showDate函數，得到下一個月的日記重構到網頁上

right.addEventListener('click',function(){let year = currentDate.getFullYear();let mm = currentDate.getMonth()+1;let dd = currentDate.getDate();currentDate = new Date(year,mm,dd);showDate(currentDate);})

這里一點，當月份小于1時，得到是時間會是上一年的十二月份，當月份大于12時，得到的時間會是下一年的一月份，所里這里我們可以不需要在月份的邊界值做越界判斷了。

最后，一個簡單的原生js小日歷就做出來啦！

總結

以上是生活随笔為你收集整理的用原生javascript制作日历的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。