万年历（JavaScript）

在这里插入图片描述
<!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>
        table {
            background-color: aqua;
            border-collapse: collapse;
            text-align: center;
        }
        
        td,
        th {
            height: 20px;
            width: 50px;
            border: 1px solid transparent;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        th:hover {
            background-color: bisque;
        }
        
        td:hover {
            background-color: aliceblue;
            z-index: 1;
        }
        
        input {
            outline: none;
            width: 50px;
        }
    </style>
</head>

<body>
    <table>
        <caption>
            请输入年：<input type="text" id="year" placeholder="1900"> 请输入月：
            <input type="text" id="month" placeholder="1"><br><br><button>打印</button>
            <br><br></caption>
        <tr>
            <th>星期天</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <script>
        var btn = document.querySelector('button');
        var td = document.querySelectorAll('td');
        btn.addEventListener('click', wannianli);
        wannianli();

        function wannianli(year, month) {
            var year = document.querySelector('#year').value;
            var month = document.querySelector('#month').value;
            if (year < 1900 || month < 1 || month > 12) {
                year = 1900;
                month = 1;
            }
            var totalDay = 0;
            //1:计算从1900年1月1号 到用户输入的年份的整年的天数 1900--用户输入的年份的前一年
            for (var i = 1900; i < year; i++) {
                if ((i % 4 == 0 && i % 100 != 0) || (i % 400 == 0)) {
                    totalDay += 366;
                } else {
                    totalDay += 365;
                }
            }
            //2:计算用户输入的年份的经过月份的天数(例如用户输入的是2020年10月 加上2020年1月--9月的总天数)
            for (var i = 1; i < month; i++) {
                switch (i) {
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                    case 8:
                    case 10:
                    case 12:
                        totalDay += 31;
                        break;
                    case 4:
                    case 6:
                    case 9:
                    case 11:
                        totalDay += 30;
                        break;
                    case 2:
                        if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0))
                            totalDay += 29;
                        else
                            totalDay += 28;
                        break;
                }
            }

            //计算用户输入的月份的天数(2020年10月 求10月1号这一天 前面加到2020年9月30号 因为10月还有一天)
            // totalDay++;
            //计算用户输入的年份和月份的第一天是星期几
            var week = (totalDay + 1) % 7;


            console.log(week);
            // td[week].innerHTML = 1;

            //问题:当前月的天数 输出截止数 下面的循环我现在不确定用户输入的月份的天数(31/30/29/28)
            //计算用户输入的月份的天数
            var monthDay = 31;
            switch (month) {
                case 4:
                case 6:
                case 9:
                case 11:
                    monthDay = 30;
                    break;
                case 2:
                    monthDay = ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) ? 29 : 28;
                    break;
            }
            // 排异
            for (var i = 0; i < 30; i++) {
                td[i].innerHTML = "";
            }
            //输出日期(从1号开始到当前月的截止)
            for (var i = week, j = 1; j <= monthDay; j++, i++) {
                td[i].innerHTML = j;
            }
        }
    </script>
</body>

</html>
万年历（JavaScript）

猜你喜欢
