欢迎访问我的博客，目前从事Machine Learning，欢迎交流

JS原生实现的简单万年历（平铺） 

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>ww</title>
    <style>
        table {
            float: left;
            padding: 15px 15px 15px 15px;
            display: block;
        }

        th {
            background: darkred;
            color: whitesmoke;
        }

        td {
            color: burlywood;
        }

        a {
            text-decoration: none;
            color: black;
        }

        a:active {
            background: yellow;
            color: brown;
        }
    </style>
    <script>
        var year = parseInt(prompt("输入年份：", "2021"));
        document.write(calendar(year));
        function calendar(y) {

            var html = '';

            for (var m = 1; m <= 12; ++m) {
                html += '<table>';
                html += '<tr><th colspan="7">' + y + '年' + m + '月</th></tr>';
                html += '<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>';

                // 获取每个月份共有多少天
                var max = new Date(y, m, 0).getDate();

                // 从该月份第一天遍历到最后一天
                for (var d = 1; d <= max; ++d) {

                    // 获取指定日期的星期值
                    var w = new Date(y, m - 1, d).getDay();

                    if (d == 1) {
                        // 一个月第一天就是一行
                        html += '<tr>';
                    }

                    // 逢周日是分行开始
                    if (d != 1 && w == 0) {
                        html += '<tr>'
                    }

                    // 第一天不是周日时，插入空白
                    if (d == 1 && w != 0) {
                        html += '<td colspan="' + w + '"></td>'
                    }

                    html += '<td onclick="showDate(' + year + ',' + m + ',' + d + ',' + w + ')">' + d + '</td>';

                    // 逢周六分行结束
                    if (w == 6) {
                        html += '</tr>'
                    }
                }

                html += '</table>';

            }
            return html;
        }

        function showDate(y, m, d, w) {
            w = w == 0 ? '日' : w;
            console.log(y + "年" + m + "月" + d + "日" + "周" + w)
        }

    </script>
</head>

<body>

</body>

</html>

 

 

posted @ 2021-04-10 23:13  有蚊子  阅读(919)  评论(0)    收藏  举报