js原生日历的实例(推荐)

前端之家收集整理的这篇文章主要介绍了js原生日历的实例(推荐)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

突然发现日期对象可以进行 加减 , 利用这个特性写了一个可以说是对只要会JavaScript 的就可以写的日历;没有各种算法,只有一些逻辑相信只要懂javascript就差不多看俩眼就会的日历。

<Meta charset="UTF-8">

<div id="data">

<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(); //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a> 当前月最后一天 
var setZhou = new Date(nian,yue,1).getDay(); //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>当前月第一天 是 周几 

for(var i=0;i<setZhou ;i++){//渲染空白 与 星期 对应上 
 var li=document.createElement('li'); 
 document.getElementById('date').appendChild(li); 
} 

for(var i=1;i<=setTian;i++){//利用<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>到的当月最后一天 把 前边的 天数 都循环 出来 
 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();
};

以上这篇js原生日历的实例(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/35451.html

猜你在找的JavaScript相关文章