微信小程序学校_js原生日历的实例(引荐)

突然发现日期对象可以进行 加减 ， 利用这个特性写了一个可以说是对只要会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" 
 span id="prev" 上一月 /span 
 span id="nian" 2017 /span 
 span id="next" 下一月 /span 
 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原生日历的实例(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持凡科。