js最简单的原生日历

来源：动视网责编：小采时间：2020-11-27 20:08:21

js最简单的原生日历

js最简单的原生日历:这次给大家带来的是js最简单的原生日历的，在最近的项目里突然发现日期对象可以进行加减，利用这个特性写了一个可以说是对只要会JavaScript的就可以写的日历，这篇文章就给大家好好介绍一下。<!DOCTYPE html> <html> <hea

推荐度：

点击下载本文 文档为doc格式

导读js最简单的原生日历:这次给大家带来的是js最简单的原生日历的，在最近的项目里突然发现日期对象可以进行加减，利用这个特性写了一个可以说是对只要会JavaScript的就可以写的日历，这篇文章就给大家好好介绍一下。<!DOCTYPE html> <html> <hea

这次给大家带来的是js最简单的原生日历的，在最近的项目里突然发现日期对象可以进行加减，利用这个特性写了一个可以说是对只要会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>

相信看了以上介绍你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

js最简单的原生日历

推荐度：

点击下载本文 文档为doc格式

标签：日历 js 原生

热门焦点

js最简单的原生日历

js最简单的原生日历

js最简单的原生日历

最新推荐

猜你喜欢

热门推荐