使用JavaScript实现日历功能_javascript日历-CSDN博客

本文链接：https://blog.csdn.net/Ashen__One/article/details/136059327
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>日历</title>
    <style type="text/css">
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .main {
            width: 400px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .center {
            padding: 20px;
            text-align: center;
        }

        #tab {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }

        #tab th, #tab td {
            border: 1px solid #ddd;
            text-align: center;
            padding: 8px;
        }

        #tab th {
            background-color: #f2f2f2;
        }

        .prev-month, .next-month {
            font-size: 20px;
            cursor: pointer;
            margin: 0 10px;
            transition: color 0.3s ease-in-out;
        }

        .prev-month:hover, .next-month:hover {
            color: #555;
        }

        .prev-month {
            color: #888; /* 上一个月颜色 */
        }

        .next-month {
            color: #4CAF50; /* 下一个月颜色 */
        }

        .current-day {
            background-color: #4CAF50;
            color: white;
            font-weight: bold;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="center">
        <!-- 上一个月按钮 -->
        <span class="prev-month" onclick="previousMonth()">&#8249;</span>
        <!-- 年份选择框 -->
        <select id="nian" class="float" onchange="generateCalendar()"></select>
        <span class="float">年</span>
        <!-- 月份选择框 -->
        <select id="yue" class="float" onchange="generateCalendar()"></select>
        <span class="float">月</span>
        <!-- 下一个月按钮 -->
        <span class="next-month" onclick="nextMonth()">&#8250;</span>
        <!-- 日历表格 -->
        <table id="tab">
            <thead>
            <tr>
                <th>周日</th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
                <th>周六</th>
            </tr>
            </thead>
            <tbody id="calendar-body"></tbody>
        </table>
    </div>
</div>
<script type="text/javascript">
    function generateCalendar() {
        var calendarBody = document.getElementById("calendar-body");
        calendarBody.innerHTML = '';

        // 获取选择的年份和月份
        var selectedYear = document.getElementById("nian").value;
        var selectedMonth = document.getElementById("yue").value;

        // 计算当月第一天和最后一天
        var firstDay = new Date(selectedYear, selectedMonth - 1, 1);
        var lastDay = new Date(selectedYear, selectedMonth, 0);

        // 获取当月总天数和第一天是星期几
        var daysInMonth = lastDay.getDate();
        var firstDayOfWeek = firstDay.getDay();

        var dayCounter = 1;

        // 计算需要的行数
        var numRows = Math.ceil((daysInMonth + firstDayOfWeek) / 7);

        for (var i = 0; i < numRows; i++) {
            var row = document.createElement("tr");

            for (var j = 0; j < 7; j++) {
                var cell = document.createElement("td");

                if (i === 0 && j < firstDayOfWeek) {
                    // 填充上个月的最后几天
                    var lastMonthDay = new Date(selectedYear, selectedMonth - 1, 0).getDate();
                    cell.textContent = lastMonthDay - (firstDayOfWeek - j - 1);
                    cell.classList.add("prev-month");
                } else if (dayCounter > daysInMonth) {
                    // 填充下个月的前几天
                    cell.textContent = dayCounter - daysInMonth;
                    cell.classList.add("next-month");
                    dayCounter++;
                } else {
                    // 当月的天数
                    cell.textContent = dayCounter;
                    if (dayCounter === new Date().getDate() && firstDay.getMonth() === new Date().getMonth() && firstDay.getFullYear() === new Date().getFullYear()) {
                        // 当天的样式
                        cell.classList.add("current-day");
                    }
                    dayCounter++;
                }

                row.appendChild(cell);
            }

            calendarBody.appendChild(row);
        }
    }

    function previousMonth() {
        var nian = document.getElementById("nian");
        var yue = document.getElementById("yue");

        // 获取当前选择的年份和月份
        var currentYear = parseInt(nian.value);
        var currentMonth = parseInt(yue.value);

        // 计算上一个月的年份和月份
        var prevYear = (currentMonth === 1) ? currentYear - 1 : currentYear;
        var prevMonth = (currentMonth === 1) ? 12 : currentMonth - 1;

        // 更新年份和月份选择框
        nian.value = prevYear;
        yue.value = prevMonth;

        // 重新生成日历
        generateCalendar();
    }

    function nextMonth() {
        var nian = document.getElementById("nian");
        var yue = document.getElementById("yue");

        // 获取当前选择的年份和月份
        var currentYear = parseInt(nian.value);
        var currentMonth = parseInt(yue.value);

        // 计算下一个月的年份和月份
        var nextYear = (currentMonth === 12) ? currentYear + 1 : currentYear;
        var nextMonth = (currentMonth === 12) ? 1 : currentMonth + 1;

        // 更新年份和月份选择框
        nian.value = nextYear;
        yue.value = nextMonth;

        // 重新生成日历
        generateCalendar();
    }

    window.onload = function () {
        // 年份和月份选择框
        var yearSelect = document.getElementById("nian");
        var monthSelect = document.getElementById("yue");

        // 填充年份下拉框，范围从2024到1970
        for (var i = 2024; i >= 1970; i--) {
            var sel = document.createElement("option");
            sel.value = i;
            sel.innerText = i;
            yearSelect.appendChild(sel);
        }

        // 填充月份下拉框，范围从1到12
        for (var i = 1; i <= 12; i++) {
            var sel = document.createElement("option");
            sel.value = i;
            sel.innerText = i;
            monthSelect.appendChild(sel);
        }

        // 初始生成日历
        generateCalendar();
    }
</script>
</body>
</html>