(JS)生成日历

IMUT_HuHao

于 2024-07-17 10:20:02 发布

阅读量149

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/IMUT_HuHao/article/details/140487292

版权

1..mathMethods.js

//判断闰年
isLeapYear = (year) => {//传入年份，返回一个boolean值
    return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
}

2.Calendar.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title></title>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1
        }

        .box {
            width: 502px;
            /*height: 500px;*/
            border: 1px solid red;


        }

        .innerDiv {
            width: 70px;
            height: 70px;
            text-align: center;
            line-height: 70px;
            border: 1px solid blue;
            float: left;
        }
    </style>
</head>
<body onload="generateCalendar()">
<div>
    <button id="lastMonth" onclick="change(-1)">上一月</button>
    <span id="nowMonth"></span>
    <button id="nextMonth" onclick="change(1)" value="下一月">下一月</button>
</div>
<div class="box clearfix"></div>

<script src="../../js/mathMethods.js"></script>
<script>
    let weeks = ["日", "一", "二", "三", "四", "五", "六"];
    let innerContent = document.querySelector('.box')
    let nowDate = new Date()
    document.querySelector('#nowMonth').innerText = nowDate.getFullYear() + '-' + ((nowDate.getMonth() + 1) < 10 ? '0' : '') + (nowDate.getMonth() + 1)

    function generateCalendar() {
        //赋第一排的星期
        for (let i = 0; i < weeks.length; i++) {
            innerContent.innerHTML += '<div class="innerDiv">' + weeks[i] + '</div>'
        }
        //1号前的空格子
        nowDate.setDate(1)
        let firstDayWeek = nowDate.getDay()//获取每月第一天的星期数
        for (let i = 0; i < firstDayWeek; i++) {
            innerContent.innerHTML += '<div class="innerDiv">' + '' + '</div>'
        }
        //计算本月有多少天
        let months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        //计算二月的天数
        months[1] = isLeapYear(nowDate.getFullYear()) ? 29 : 28
        let days = months[nowDate.getMonth()]
        for (let i = 1; i <= days; i++) {
            innerContent.innerHTML += '<div class="innerDiv">' + i + '</div>'
        }
    }

    function change(i) {
        innerContent.innerHTML = '';        //先清空
        nowDate.setMonth(nowDate.getMonth() + i)
        document.querySelector('#nowMonth').innerText = nowDate.getFullYear() + '-' + ((nowDate.getMonth() + 1) < 10 ? '0' : '') + (nowDate.getMonth() + 1)
        generateCalendar()
    }

</script>
</body>
</html>