用原生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制作日历的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。