原生js实现日历效果
更新时间：2020年03月02日 09:36:20 作者：Controllerszzy
这篇文章主要为大家详细介绍了原生js实现日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现日历效果的具体代码，供大家参考，具体内容如下
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>日历插件</title>
<link rel="stylesheet" href="./css/reset.css" >
<link rel="stylesheet" href="./css/index.css" >
</head>
<body>
<div class="show">
<button id="pre">上月</button>
<span id="showtime">2019-01</span>
<button id="next">下月</button>
</div>
<div class="box" id="box">
</div>
</body>
<script>
// 获取本月第一天
function getMonthDay(date){
date=new Date(date.valueOf())
date.setDate(1);
return date
}
// 获取本月最后一天
function getMonthLastDay(date){
date=new Date(date.valueOf())
date.setMonth(date.getMonth()+1);
date.setDate(0);
return date
}
//获取本月的时间对象集合
function getMonth(date){
var arr=[]
// 获取本月第一天
var _date=getMonthDay(date)
// // 获取本月最后一天
var dataLast=getMonthLastDay(date).getDate()
arr.push(new Date(_date.valueOf()))
// 处理本月第一天 到本月最后一天
for(var i =1;i<dataLast;i++){
_date.setDate(_date.getDate()+1)
arr.push(new Date(_date.valueOf()))
}
// 向前补全，重置为本月一号
_date=getMonthDay(date)
var forln=_date.getDay()
for(var i=0;i<forln;i++){
_date.setDate(_date.getDate()-1)
arr.unshift(new Date(_date.valueOf()))
}
// 向后补全,重置为本月最后一天
_date=getMonthLastDay(date)
forln=_date.getDay()
for(var i=forln;i<6;i++){
_date.setDate(_date.getDate()+1)
arr.push(new Date(_date.valueOf()))
}
return arr
}
// 将集合渲染到页面
function renderTable(monthDateArr,date){
document.getElementById("showtime").innerHTML=`${date.getFullYear()}-${date.getMonth()+1}`
var table=document.createElement('table')
var trTh=document.createElement('tr')
trTh.innerHTML=`
<th>周日</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
`
table.appendChild(trTh)
var tr=document.createElement('tr')
for(let i in monthDateArr){
var td=document.createElement('td')
td.innerHTML=monthDateArr[i].getDate()
tr.appendChild(td)
if((i*1+1)%7===0){
table.appendChild(tr)
tr=document.createElement('tr')
}else if(i == monthDateArr.length-1){
table.appendChild(tr)
}
}
document.getElementById("box").innerHTML=table.outerHTML
}
var date=new Date()
document.getElementById('pre').onclick=function(){
date.setDate(1)
date.setMonth(date.getMonth()-1)
renderTable(getMonth(date),date)
}
document.getElementById('next').onclick=function(){
date.setDate(1)
date.setMonth(date.getMonth()+1)
rrenderTable(getMonth(date),date)
}
renderTable(getMonth(date),date)
</script>
</html>
css代码
.box{
width: 700px;
margin: 0 auto;
box-sizing: border-box;
padding: 0 1px;
}
table{
width: 100%;
}
th,td{
width:100px;
text-align: center;
}
th{
height: 30px;
line-height: 30px;
background: #e0e5e5;
}
td{
height: 70px;
line-height: 70px;
background: #f3f5f5;
}
.show{
display: flex;
align-items: center;
justify-content: center;
}
更多精彩内容请点击专题《javascript日历插件使用方法汇总》进行学习
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了TypeScript如何开启严格空值检查，文章围绕TypeScript的相关资料展开详情内容，需要的小伙伴可以参考一下2022-03-03
这篇文章主要介绍了JS随机打乱数组的方法,结合实例总结分析了几种常用的数组打乱顺序并重新进行排序的技巧,非常简单实用,需要的朋友可以参考下2016-06-06
本文主要介绍了深入JS函数中默认参数的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
jQuery 框架用的人越来越多了, 无论是性能还是功能强大都不用多说.2010-11-11
Firefox 无法获取cssRules 的解决办法...2006-10-10
这篇文章主要介绍了JavaScript定义全局对象的方法,结合实例形式分析了javascript全局对象的简单定义流程与实现技巧,需要的朋友可以参考下2017-01-01
遇到了操作iframe的相关问题，其实就是在操作iframe内部某个窗体时，调用父窗体的一个函数，下面与大家分享下操作iframe兼容各种浏览器的方法2013-07-07
本文通过实例代码给大家介绍了JS原生数据双向绑定问题，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-08-08
本文主要介绍了JavaScript WeakMap的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
同样在HTML5可以通过data-自定义属性名来给元素添加自定义的属性名。一旦添加完成之后。通过JS可以获取以及设置自定义属性。这篇文章主要介绍了jQuery中选择查找自定义属性具有特定值的所有元素2023-02-02
最新评论