js如何实现日历功能
这篇文章给大家分享的是有关js如何实现日历功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
成都创新互联-专业网站定制、快速模板网站建设、高性价比玛曲网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式玛曲网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖玛曲地区。费用合理售后完善，十载实体公司更值得信赖。
突然发现日期对象可以进行 加减 ， 利用这个特性写了一个可以说是对只要会JavaScript 的就可以写的日历；没有各种算法，只有一些逻辑相信只要懂javascript就差不多看俩眼就会的日历。
*{
margin: 0px;
padding: 0px;
}
#data{
width: 280px;
border: 1px solid #000000;
margin: 20px auto;
}
#data > p{
display: flex;
}
#data > h6{
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;
}
上一月
2017
下一月
一月
日
一
二
三
四
五
六
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
感谢各位的阅读！关于“js如何实现日历功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
当前标题：js如何实现日历功能
文章来源：http://csdahua.cn/article/ggsedp.html
