介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; meta name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比;
,& lt; meta http-equiv=癤-UA-Compatible",内容=癷e=edge"比;
,& lt; title>日历插件& lt;/title>
,& lt; link rel=皊tylesheet" https://www.yisu.com/zixun/, href=" ./css/reset.css ">
小编给大家分享一下怎么使用原生js实现日历效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
具体内容如下
html代码
<按钮id="以前">上月> 2019 - 01年
<按钮id=跋乱桓觥?下月>
<>脚本//获取本月第一天
函数getMonthDay(日期){
日期=new日期(date.valueOf ())
date.setDate (1);
返回日期
}//获取本月最后一天
函数getMonthLastDay(日期){
日期=new日期(date.valueOf ())
date.setMonth (date.getMonth () + 1);
date.setDate (0);
返回日期
}//获取本月的时间对象集合
函数getMonth(日期){
var arr=[]//获取本月第一天
var _date=getMonthDay(日期)////获取本月最后一天
var dataLast=getMonthLastDay(日期).getDate ()
加勒比海盗。推动(新日期(_date.valueOf ()))//处理本月第一天到本月最后一天
(var=1, 周日
周一
周二
周三
周四
周五
周六
”
table.appendChild (trTh)
var tr=document.createElement (tr)
(让我在monthDateArr) {
var td=document.createElement (td)
td.innerHTML=monthDateArr[我].getDate ()
tr.appendChild (td)
如果((我* 1 + 1)% 7===0){
table.appendChild (tr)
tr=document.createElement (tr)
我==monthDateArr.length-1} else if () {
table.appendChild (tr)
}
}
. getelementbyid(“盒”).innerHTML=table.outerHTML
}
var=new日期()
. getelementbyid(前).onclick=function () {
date.setDate (1)
date.setMonth (date.getMonth () 1)
renderTable (getMonth(日期),日期)
}
. getelementbyid (“next”) .onclick=函数(){
date.setDate (1)
date.setMonth (date.getMonth () + 1)
rrenderTable (getMonth(日期),日期)
}
renderTable (getMonth(日期),日期)> .box {
,宽度:700 px;
,保证金:0,汽车;
,box-sizing: border-box;
,填充:0,1 px;
}
表{
,宽度:100%;
}
th, td {
,宽度:100 px;
,text-align:中心;
}
th {
,高度:30 px;
,行高:30 px;
,背景:# e0e5e5;
}
td {
,身高:70 px;
,行高:70 px;
,背景:# f3f5f5;
}
,告诉{
,显示:flex;
,对齐项目:中心;
,justify-content:中心;
}
css代码
以上是“怎么使用原生js实现日历效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
