JS简易日历

最新推荐文章于 2023-09-21 13:13:29 发布

听风雨呀

最新推荐文章于 2023-09-21 13:13:29 发布

阅读量314

点赞数 2

文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/m0_51662612/article/details/126103365

版权

本文将介绍如何利用JavaScript、CSS和HTML创建一个简单的日历功能。通过纯JavaScript实现日历的动态显示，结合CSS进行样式美化，以及HTML布局，为用户提供直观的日历查看体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @charset "utf-8";

        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .date {
            width: 300px;
            border: 1px solid black;
            margin: 50px auto;
        }

        .header {
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            box-sizing: border-box;
        }

        .pre,
        .next {
            cursor: pointer;
        }

        .month {
            text-align: center;
            font-weight: bold;
            font-size: 14px;
        }

        .title {
            background-color: #CCCCCC;
            height: 30px;
            display: flex;
            justify-content: space-around;
            line-height: 30px;

        }


        .day {
            overflow: hidden;
        }

        .day li {
            float: left;
            width: 37.5px;
            height: 37px;
            background-color: pink;
            margin-left: 4.5px;
            margin-bottom: 5px;
            text-align: center;
            line-height: 37px;
        }

        .day .padli {
            background-color: transparent;
        }

        .day .actived {
            border: 1px solid black;
            color: red;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="date">
        <p class="header">
            <span class="pre">上一月</span>
            <span class="nian">2022</span>
            <span class="next">下一月</span>
        </p>
        <p class="month">一月</p>
        <ul class="title">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
        </ul>
        <ul class="day ">
        </ul>
    </div>
    <script>
        let pre = document.querySelector('.pre');
        let next = document.querySelector('.next');
        let ul_day = document.querySelector('.day');
        let monthArr = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
        let date = new Date();
        add();
        function add() {
            let year = date.getFullYear(); // 年
            let month = date.getMonth() + 1; // 月 (从0开始，)
            let day = date.getDate(); // 当前日

            // 获取每个月的第一天是星期几
            let week = new Date(year, month - 1, 1).getDay();
            // console.log(new Date(2022,7,1).getDay()); // 获取2022.08.01是星期几

            // 获取每个月的有多少天
            let days = new Date(year, month, 0).getDate(); // Date对象月份从0开始，即0表示1月份，以此类推。由于JavaScript中day的范围为1~31中的值，所以当设为0时，会向前 一天，也即表示上个月的最后一天。
            // console.log(new Date(2022,8,0).getDate());  // 获取八月有多少天

            document.querySelector('.nian').innerHTML = year;  // 设置年份
            document.querySelector('.month').innerHTML = monthArr[month - 1]; // 设置月分

            // 先填充每个月开始前空的
            let padlis = '';
            for (let i = 0; i < week; i++) {
                padlis += `<li class="padli"></li>`;
            }
            // 再填充之后的
            for (let i = 1; i <= days; i++) {

                if (i == day && month == new Date().getMonth() + 1) {
                    padlis += `<li class="actived">${i}</li>`
                } else {
                    padlis += `<li>${i}</li>`
                }

            }
            ul_day.innerHTML = padlis;
        }
        pre.onclick = function () {
            date.setMonth(date.getMonth() - 1);
            add();
        }
        next.onclick = function () {
            date.setMonth(date.getMonth() + 1);
            add();
        }


    </script>
</body>

</html>