使用js实现日历效果，主要用到了元素的创建以及添加
对应的方法是document.createElement()和document.appendChild()
主要实现思路：
- 用div布局把日历的页面框架搭建出来
- 依次遍历上月，本月，下月的天数
- 切换月份的时候首先清空所有日历元素，再将新的日期添加进去
剩下的就是一些配合js的样式
以下是代码部分：文章来源：https://www.toymoban.com/news/detail-495347.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h3{
text-align: center;
}
.Calendar{
width: 420px;
height: 380px;
margin: auto;
background-color: rgb(226,230,236);
}
.Calendar>div{
display: flex;
height: 54px;
justify-content: space-around;
}
.Calendar>div>div{
border-radius:50%;
text-align: center;
line-height: 52px;
border: 0.2px solid rgba(200,200,200,0);
width: 54px;
height: 54px;
}
.Calendar>div:not(:first-child)>div:hover{
background-color:gray;
}
#row1{
background-color: rgba(153,153,153,0.8);
}
#time{
text-align: center;
margin-bottom: 10px;
}
button{
border-radius: 10px;
font-family: 楷体;
font-weight: bold;
background-color: rgba(96, 82, 100,0.5);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
span{
font-family: 楷体;
font-weight: bold;
font-size: 25px;
}
</style >
</head>
<body>
<h3>日历表</h3>
<div id="time">
<button onclick="switchLastMonth()">上一月</button>
<span></span>
<button onclick="switchNextMonth()">下一月</button>
</div>
<div class="Calendar">
<div id="row1">
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
<div>日</div>
</div>
<div id="row2">
</div>
<div id="row3">
</div>
<div id="row4">
</div>
<div id="row5">
</div>
<div id="row6">
</div>
<div id="row7">
</div>
</div>
<script>
//每月天数
let fullDaysArr = [31,28,31,30,31,30,31,31,30,31,30,31]
//当前时间
let nowDate = new Date()
let timeSpan = document.getElementsByTagName("span")[0]
timeSpan.innerText=nowDate.toLocaleDateString()
//判断今年是否是闰年
isLeapYear(nowDate.getFullYear())==1?fullDaysArr[1]+=1:fullDaysArr[1]=28
//上月时间
let lastDate = new Date(nowDate.getFullYear(),nowDate.getMonth()-1,fullDaysArr[nowDate.getMonth()-1])
//下月时间
let nextDate = new Date(nowDate.getFullYear(),nowDate.getMonth()+1,1)
//每行div的id
let eleIds = ['row2','row3','row4','row5','row6','row7']
//eleIds下标
let j = 0
//计数总共添加了多少个子元素
let total = 0
//计数每行添加了多少个子元素
let count = 0
//foreachDate被调用了几次
let k = 0;
function updateDate(num) {
nowDate.setMonth(nowDate.getMonth()+num)
lastDate=new Date(nowDate.getFullYear(),nowDate.getMonth()-1,fullDaysArr[nowDate.getMonth()-1])
if (nowDate.getMonth()==1) {
fullDaysArr[1]=28
isLeapYear(nowDate.getFullYear())==1?fullDaysArr[1]+=1:fullDaysArr[1]=28
}
generateCalendar('removeChildren')
timeSpan.innerText=nowDate.toLocaleDateString()
}
//切换到上个月
function switchLastMonth() {
updateDate(-1)
}
//切换到下个月
function switchNextMonth() {
updateDate(1)
}
//清空所有日历元素
function clearCalendar(){
let eles = getCalendar()
eles.forEach(e=>{
e.remove()
})
}
//获取标签元素
function $(eleName) {
return document.getElementById(eleName);
}
//为每个日历元素添加点击事件
function addEvent(elements) {
//记录上一个点击事件的信息
let temp,color,border
//为每一个日历时间元素添加点击事件
for (let index = 0; index < elements.length; index++) {
elements[index].addEventListener('click',function(event) {
if (temp) {
temp.target.style.border = border
temp.target.style.color= color
}
if (!temp ||temp.target!=event.target) {
temp=event,color=event.target.style.color,border=event.target.style.border
event.target.style.border="0.2px solid black"
event.target.style.color="blue"
}
})
}
}
//判断是否是闰年
function isLeapYear(year) {
return (year%400==0 || (year%4==0 && year%100!=0))?1: 0
}
//遍历日期
function foreachDate(numDay,flag=0) {
// debugger
k++
if (flag!=-1) {
for (let i = 1; i <=numDay; i++) {
let Div = document.createElement('div')
Div.innerText = i
if (i==nowDate.getDate()) {
Div.style.background = "rgb(23,115,196)"
}
if(k==3){
Div.style.color="rgb(128, 128, 128, 0.5)"
}
count++,total++
$(eleIds[j]).appendChild(Div)
if (count==7) {
j++,count=0
}
}
}else{
for (let i = numDay-1; i >= 0; i--) {
let Div = document.createElement('div')
Div.innerText = lastDate.getDate()-i
Div.style.color="rgb(128, 128, 128, 0.5)"
total++,count++
$(eleIds[j]).appendChild(Div)
if (count==7) {
j++,count=0
}
}
}
}
//生成日期
function generateCalendar(mode='appendChild') {
// debugger
if (mode=='removeChildren') {
clearCalendar()
}
//上月
foreachDate(lastDate.getDay()==0?0:lastDate.getDay(),-1)
//当月
foreachDate(fullDaysArr[nowDate.getMonth()])
//下月
foreachDate(42 - total)
j=0,total=0,count=0,k=0,n=0
//获取所有日历时间元素
let elements = getCalendar()
//添加点击事件
addEvent(elements)
}
//获取所有日历元素
function getCalendar(){
return document.querySelectorAll('div.Calendar>div:not(:first-child)>div')
}
window.onload = function() {
generateCalendar()
}
</script>
</body>
</html>
效果：
文章来源地址https://www.toymoban.com/news/detail-495347.html
到了这里，关于js实现日历效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
