js实现日历效果

使用JavaScript实现动态日历效果

最新推荐文章于 2025-09-15 13:25:17 发布

原创最新推荐文章于 2025-09-15 13:25:17 发布 · 2.9k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html

前端相关专栏收录该内容

19 篇文章

订阅专栏

该代码示例展示了如何使用JavaScript和HTML/CSS创建一个基本的日历界面。通过动态添加和删除元素，实现了切换月份的功能。当用户点击上一月或下一月按钮时，会清除现有日期并填充新的月份日期。此外，还包含了日期元素的样式设置和点击事件处理。

使用js实现日历效果，主要用到了元素的创建以及添加
对应的方法是document.createElement()和document.appendChild()
主要实现思路：

用div布局把日历的页面框架搭建出来
依次遍历上月，本月，下月的天数
切换月份的时候首先清空所有日历元素，再将新的日期添加进去

剩下的就是一些配合js的样式

以下是代码部分：

<!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>