JavaScript小demo-日历

需求

实现下图中的日历，日历随着时间自动更新，当天的日期会用红底白字突出显示，点击“上一月”或“下一月”按钮，日期会随之变化，点击“回到当下”按钮，日期会回到当前时间。

分析

①变动的部分：年月日随着时间和操作的变化而变化

②不变的部分：“上一月”、“下一月”、星期、“回到当下”

思路

①变动的部分：写一个函数，输入为年、月、日，可以根据年月日实时更新dom节点，点击“上一月”按钮就计算上一月的年月日，点击“下一月”按钮就计算下一月的年月日，点击回到当下计算当前的年月日，点击过后都调用该函数根性dom节点

②不变的部分：写死，按钮添加一些事件

代码

<!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>Calendar</title>
    <style>
        ul,li {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        html,body {
            width: 100%;
        }

        .data {
            width: 350px;
            display: flex;
            flex-direction: column;
            border: 1px solid gray;
            margin: 50px auto;
        }

        .data>div {
            display: flex;
        }

        .data>div>span {
            flex: 1;
        }

        .prevmonth {
            text-align: left;
        }

        .year {
            text-align: center;
        }

        .nextmonth {
            text-align: right;
        }

        .month {
            margin: auto;
            font-size: 13px;
            font-weight: bold;
        }

        .week {
            display: flex;
            background: rgb(175, 175, 175);
        }

        .week>li {
            flex: 1;
            text-align: center;
        }
        .day{
            display: flex;
            flex-wrap: wrap;
        }
        .day>li{
            width: 50px;
            height: 30px;
            text-align: center;
            line-height: 30px;

        }
        .back{
            border: none;
        }
    </style>
</head>

<body>
    <div class="data">
        <div>
            <span class="prevmonth">上一月</span>
            <span class="year">2022</span>
            <span class="nextmonth">下一月</span>
        </div>
        <div class="month">三月</div>
        <ul class="week">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
        </ul>

        <ul class="day"></ul>
        <button class="back">回到当下</button>
    </div>

    <script>
        var date = new Date()                                       //获取当前时间戳
        var solar_calendar = date.toLocaleDateString().split('/')   //获取当前年、月、日
        var week = date.getDay()                                    //获取当前的星期
        var prevmonth = document.querySelector('.prevmonth')        //获取“上一月”dom节点，方便后面绑定事件
        var nextmonth = document.querySelector('.nextmonth')        //获取“下一月”dom节点
        var btn = document.querySelector('.back')                   //获取“回到当下”dom节点
        var num_to_week = ['一月','二月','三月','四月','五月','六月',　　//根据数字索引可转化为中文月份的月份列表
            '七月','八月','九月','十月','十一月','十二月']

        plus(solar_calendar[0],solar_calendar[1],solar_calendar[2])//进入页面即调用修改dom的plus()函数，输入为当前的年月日

        //为“上一月”dom节点绑定点击事件
        prevmonth.onclick = function(){
            let year = document.querySelector('.year').innerHTML                            //获取当前年份的值
            let month = num_to_week.indexOf(document.querySelector('.month').innerHTML)+1   //获取当前月份的数值
            if(document.querySelector('.month').innerHTML==='一月'){                        //判断当前月份是否为一月
                year = year - 1                                                             //是的话，点击之后年份减1，月份变为12
                month = 12
                if(year==solar_calendar[0]&&month==solar_calendar[1]){                      //判断年、月是否是当前的年、月，加这个判断是为了给当前年月的日期加一个红底白字的渲染
                    plus(year,month,solar_calendar[2])                                      //是的话调用plus()函数
                }else{
                    plus(year,month)                                                        //不是的话调用plus()函数，其中day默认值为0，这样就不会对日期进行渲染
                }
            }else{                                                                          //当前日期不是一月则月份减1
                month = month - 1
                if(year==solar_calendar[0]&&month==solar_calendar[1]){                      //判断年、月是否是当前的年、月
                    plus(year,month,solar_calendar[2])                                      //是的话调用plus()函数
                }else{
                    plus(year,month)                                                         //不是的话调用plus()函数，其中day默认值为0，这样就不会对日期进行渲染
                }
            }
        }

        // 为“下一月”绑定点击事件，流程和“上一月”都差不多了
        nextmonth.onclick = function(){
            let year = document.querySelector('.year').innerHTML
            let month = num_to_week.indexOf(document.querySelector('.month').innerHTML)+1
            if(document.querySelector('.month').innerHTML==='十二月'){
                year = String(parseInt(year) + 1)
                month = 1
                if(year==solar_calendar[0]&&month==solar_calendar[1]){
                    plus(year,month,solar_calendar[2])
                }else{
                    plus(year,month)
                }
            }else{
                month = month + 1
                if(year==solar_calendar[0]&&month==solar_calendar[1]){
                    plus(year,month,solar_calendar[2])
                }else{
                    plus(year,month)
                }
            }
        }

        // 为“回到当下”绑定点击事件，调用plus()函数，输入为当前年、月、日
        btn.onclick = function(){
            plus(solar_calendar[0],solar_calendar[1],solar_calendar[2])
        }

        //获取闰年和非闰年每月的日期数
        function Leap_year(year){
            if(!(year%400)||!(year%4)&&year%100){               //判断是否为闰年
                return [31,29,31,30,31,30,31,31,30,31,30,31]    //是的话返回二月为29天的数组
            }
            return [31,28,31,30,31,30,31,31,30,31,30,31]        //不是的话返回二月为28天的数组
        }

        //动态渲染节点函数，输入为年、月、日
        function plus(year,month,day=0) {
            
            //修改年份和月份为输入的年份和月份
            document.querySelector('.year').innerHTML = year
            document.querySelector('.month').innerHTML = num_to_week[month-1]
            
            //调用Leap_year得到输入年份的每月天数的数组
            let days_of_month = Leap_year(year)
            var str = ''

            // 得到每月1号的星期数，并在每月1号前面添加相应数量空的li节点
            for(let j=0;j<parseInt(new Date(year,month-1,1).getDay());j++){
                str = str + '<li></li>'
            }
            // 根据输入月的天数动态增加li节点
            for(let i=1; i<days_of_month[month-1]+1; i++){
            // 判断输入的day是否等于i，是的话就渲染节点，不是当前年月时输入的day默认为0就不会渲染
                if(day==i){
                    str = str + "<li><div style='color:white;border-radius:20px;background:red;width:30px;margin:auto'>"+i+"</div></li>"
                }
                else{
                    str = str + '<li>'+i+'</li>'
                }
            }
            document.querySelector('.day').innerHTML = str
        }
    </script>
</body>

</html>