突然发现日期对象可以进行 加减 ， 利用这个特性写了一个可以说是对只要会JavaScript 的就可以写的日历；没有各种算法，只有一些逻辑相信只要懂javascript就差不多看俩眼就会的日历。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0px;padding: 0px;}#data{width: 280px;border: 1px solid #000000;margin: 20px auto;}#data > p{display: flex;} #data > h5{text-align: center;}#data > p > span{padding: 0 10px;}#prev,#next{cursor: pointer;}#nian{flex: 1;text-align: center;}#title{overflow: hidden;list-style: none;background: #ccc;}#title > li{float: left;width: 40px;height: 26px;line-height: 26px;text-align: center;}#date{overflow: hidden;list-style: none;}#date > li{float: left;width: 34px;height: 34px;margin: 1px 1px;border: 2px solid rgba(0,0,0,0);line-height: 34px;text-align: center;cursor: pointer;}#date > .hover:hover{border: 2px solid red;}.active{color: red;}</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><script type="text/javascript">var dat = new Date(); //当前时间var nianD = dat.getFullYear();//当前年份var yueD = dat.getMonth(); //当前月var tianD = dat.getDate(); //当前天 ???这保存的年月日 是为了 当到达当前日期 有对比add(); //进入页面第一次渲染function add(){document.getElementById(‘date‘).innerHTML = "";var nian = dat.getFullYear();//当前年份var yue = dat.getMonth(); //当前月var tian = dat.getDate(); //当前天var arr=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];document.getElementById(‘nian‘).innerText = nian;document.getElementById(‘yue‘).innerText = arr[yue];var setDat = new Date(nian,yue + 1,1 - 1); //把时间设为下个月的1号 ???然后天数减去1 ?就可以得到 当前月的最后一天;var setTian = setDat.getDate(); //获取 当前月最后一天var setZhou = new Date(nian,yue,1).getDay(); //获取当前月第一天 是 周几 for(var i=0;i<setZhou ;i++){//渲染空白 与 星期 对应上var li=document.createElement(‘li‘);document.getElementById(‘date‘).appendChild(li);} for(var i=1;i<=setTian;i++){//利用获取到的当月最后一天 把 ?前边的 天数 都循环 出来var li=document.createElement(‘li‘);li.innerText = i;if(nian == nianD && yue == yueD && i == tianD){li.className = "active";}else{li.className = "hover";}document.getElementById(‘date‘).appendChild(li);}}document.getElementById("next").onclick = function(){dat.setMonth(dat.getMonth() + 1); //当点击下一个月时 对当前月进行加1;add(); //重新执行渲染 获取去 改变后的 ?年月日 ?进行渲染;};document.getElementById("prev").onclick = function(){dat.setMonth(dat.getMonth() - 1); //与下一月 同理add();};</script></body></html>
js原生日历
原文地址：http://www.cnblogs.com/durenlong/p/7754862.html