突然发现日期对象可以进行加减，利用这个特性写了一个可以说是对只要会Java脚本语言的就可以写的日历；没有各种算法，只有一些逻辑相信只要懂爪哇岛描述语言就差不多看俩眼就会的日历。

！DOCTYPE html html head meta charset=' UTF-8 ' title/title style type=' text/CSS ' * { margin 3360 0px；padding: 0px } #数据{ width: 280pxborder: 1px固体# 000000;余量： 20px自动；} # data p { display : flex } # data H5 { text-align : center；} #数据p span { padding: 0 10px } # prev，#next{ cursor:指针；} # nian { flex : 1；文本对齐：中心；} #title{ overflow:隐藏；列表样式：无；背景# ccc} #title li{左侧浮动：宽度： 40px高度： 26px线高： 26px文本对齐：中心；} #date{ overflow:隐藏；列表样式：无；} #日期li{左侧浮动：宽度： 34pxheight : 34 pxmargin : 1px 1pxborder : 2px固体rgba(0，0，0，0)；线高： 34px文本对齐：中心；光标：指针；} #日期。悬停：悬停{边框： 2px纯红；} .活动{ color:红色；}/style/head body div id=' data ' p span id=' prev '上一月/span span id=' nian ' 2017/span span id=' next '下一月/span /p h5 id='yue '一月/h5 ul id='title' li日/li li一/li li二/li li三/li li四/li li五/li li六/li /ul ul id='date' /ul /div脚本类型=' text/JavaScript ' var dat=new Date()；//当前时间var NiAnD=dat。GetFullyear()；//当前年份var Yued=dat。GetMount()；//当前月var TiAnD=dat。GetDate()；//当前天这保存的年月日是为了当到达当前日期有对比add()；//进入页面第一次渲染函数add(){ document。getelementbyid(' date ').innerHTML=var nian=dat。GetFullyear()；//当前年份var yue=dat。getmonth()；//当前月var Tian=dat。GetDate()；//当前天var arr=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];document.getElementById('nian ').inner text=nian document . getelementbyid(' yue ').内部文本=arr[yue]；var setDat=新日期（年，月1,1-1);//把时间设为下个月的一号然后天数减去一就可以得到当前月的最后一天；var setTian=setdat。getdate()；//获取当前月最后一天var setZhou=新日期（年，月，1)。getDay()；//获取当前月第一天是周几for(var I=0；isetZhoui ){//渲染空白与星期对应上var Li=文档。创建元素(“李”)；document.getElementById('date ').附录子(李)；} for(var I=1；i=setTiani ){//利用获取到的当月最后一天把前边的天数都循环出来var Li=文档。创建元素(“李”)；李。inner text=I；if(nian==NiAnD yue==YoD I==TiAnD){ Li。类名=' active} else { Li . class name=' hover ' document . getelementbyid(' date ').附录子(李)；} }文档。getelementbyid(' next ').onclick=function(){ dat。setmonth(dat。get month)(1)；//当点击下一个月时对当前月进行加1;add()；//重新执行渲染获取去改变后的年月日进行渲染；};document.getElementById('prev ').onclick=function(){ dat。setmonth(dat。getmonth()-1)；//与下一月同理add()；};/脚本/正文/html以上这篇射流研究…原生日历的实例（推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。