萬年曆(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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章