突然发现日期对象可以进行 加减 ， 利用这个特性写了一个可以说是对只要会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原生日历的实例(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。
新闻热点
疑难解答
