时间:2021-05-26
突然发现日期对象可以进行 加减 , 利用这个特性写了一个可以说是对只要会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原生日历的实例(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
人生日历设置日历样式方法。不喜欢人生日历系统默认的日历样式?可以手机重新设置,那么要怎么设置呢?现在小编就教大家人生日历设置日历样式方法。软件名称:人生日历手机
人生日历已经成为人们生活中必不可少一款软件了,现在人生日历推出瘦身版轻日历,那么人生日历瘦身版轻日历怎么用?下面小编给大家带来人生日历瘦身版轻日历使用教程,做个
人生日历今日概览怎么用?大家可以通过下文来了解人生日历今日概览使用方法,人生日历中的“今日概览”是一个很实用的功能,那么这个功能具体
人生日历安排国庆节计划教程来咯~有了人生日历我们就能够有条不紊的度过国庆节哦~人生日历的“记事本”和“天气”
人生日历计时器提醒怎么用人生日历计时器使用教程软件名称:人生日历v4.1.10.84中文绿色独立版软件大小:7.70MB更新时间:2014-09-11立即下载首