用原生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制作日历相关推荐

非常不错的一款html5【404页面】,不含js脚本可以左右摆动,原生JavaScript实现日历功能代码实例(无引用Jq)...
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下成品显示,可左右切换月份 ...
php拼图游戏开发,原生javascript制作的拼图游戏实现方法详解
本文实例讲述了原生javascript制作的拼图游戏实现方法.分享给大家供大家参考,具体如下: 实现方法 //1.让所有的li(在ul里)可以拖拽 //2.交换li的位置计算背景图位置 //1.让 ...
用html制作一个音乐排行榜,使用原生JavaScript制作一个漂亮的音乐播放器
简单介绍起初在简书上发现了这篇博客--[html.css.jq]制作一个简洁的音乐播放器.这是一个用jQuery库实现的音乐播放器,界面简约大气. 我在这个基础上,反其道而行,使用原生JavaScr ...
《原生javascript制作各种酷炫组件》专栏介绍
本专栏主要是用原生javascript和css来编写一些炫酷的效果,用原生写是为了读者能把代码放到任何框架当中,代码没有做封装,瀑布式的代码理解起来容易,也容易修改以便达到自己想要的效果,适合初级学者 ...
用javaScript制作日历
z 这是我做出来的最终效果,界面比较简单,以后有时间会稍作修改,把界面和功能做得更加完善. html+css代码如下: <!DOCTYPE html> <html> <h ...
原生javascript制作svg进度球
在SVG发展到今天,已经在互联网上进行了各式各样的运用,当然也就包括进度条以及进度球的制作,制作这个类型的动画交互该如何制作呢?接下来就带大家来揭秘吧! 1. 兴趣引导 > 最终效果 - SV ...
原生javascript制作盖房子小游戏
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>盖房子 ...
HTML5七夕情人节表白网页制作【原生JS制作爱心表白代码】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
原生JS制作自动+手动轮播图，附带二级分类菜单
原生JS制作自动+手动轮播图,附带二级分类菜单包含以下功能: 1.鼠标移开自动轮播 2.鼠标移入停止自动轮播 3.点击左右按钮可手动切换图片 4.点击索引小圆点可手动切换图片 5.鼠标移入一级菜单展 ...
css画钟表_利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

用原生javascript制作日历

用原生js制作日历

用原生javascript制作日历相关推荐

最新文章

热门文章