js原生日历的实例(推荐)
程序员文章站
2022-03-27 08:26:02
突然发现日期对象可以进行 加减 , 利用这个特性写了一个可以说是对只要会javascript 的就可以写的日历;没有各种算法,只有一些逻辑相信只要懂javasc...
突然发现日期对象可以进行 加减 , 利用这个特性写了一个可以说是对只要会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原生日历的实例(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。