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

2021-04-10 23:32:25 阅读：216 来源： 互联网

标签：平铺万年历 color JS html year var 15px calendar

<!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>

标签：平铺,万年历,color,JS,html,year,var,15px,calendar
来源： https://www.cnblogs.com/ww01/p/14642572.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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