js实现：制作年历利用内置对象的Date对象方法

最新推荐文章于 2024-05-03 11:08:18 发布

陌巷偷客

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量539

点赞数 1

分类专栏： js基础入门练习文章标签： javascript

本文链接：https://blog.csdn.net/m0_53881313/article/details/124199607

版权

js基础入门练习专栏收录该内容

23 篇文章 5 订阅

订阅专栏

结果如下：

输入你想查看年历的哪一年，点击确定。结果如下：例如输入‘2020’，点击确定结果如下

下面是代码部分：

首先是css样式;

 <style>
        body {
            text-align: center;
        }

        .box {
            margin: 0 auto;
            width: 880px;
        }

        .title {
            background: #ccc;
        }

        table {
            height: 200px;
            width: 200px;
            font-size: 12px;
            text-align: center;
            float: left;
            margin: 10px;
            font-family: arial;
        }
    </style>

html 里面的内容可以不写用js写入；

下面是js 代码：

  <script>
        var year = parseInt(prompt('输入要查看的年份：'));
        document.write(calendar(year));//调用函数生成指定年份的年历
        function calendar(y) {
            //获取指定年份1月1日的星期数值
            var w = new Date(y, 0).getDay();
            var html = '<div class="box">';

            //拼接每个月份的表格
            for (m = 1; m <= 12; m++) {
                html += '<table>';
                html += '<tr class="title"><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();

                html += '<tr>';//开始<tr>标签
                for (d = 1; d <= max; d++) {
                    if (w && d == 1) {//如果该月的第1天不是星期日，则填充空白
                        html += '<td colspan ="' + w + '"> </td>';
                    }
                    html += '<td>' + d + '</td>';
                    if (w == 6 && d != max) {//如果星期六不是该月的最后一天，则换行
                        html += '</tr><tr>';
                    } else if (d == max) {//该月的最后一天，闭合</tr>标签
                        html += '</tr>';
                    }
                    w = (w + 1 > 6) ? 0 : w + 1;
                }
                html += '</table>';
            }
            html += '</div>';
            return html;
        }

    </script>

常用的Date对象：

getFullYear() 获取当前年份，四位数字例如2020

setFullYear(value) 用来设置年份。并且会自动增加。

getMonth() 用来获取月份，范围0~11（0表示一月，1表示二月，依次类推）

setMonth(value) 设置月份。会自动增加，例如写几天后是几月。如果天数较多，超出这个月的最大日期，会自动转入下一个月。其他的也是同理。

getDate() 获取月份中的某一天，范围1~31

setDate(value) 设置月份中的某一天

getHours() 获取小时数，返回0~23

setHours(value) 设置小时数

getMinutes() 获取分钟数，范围0~59

setMinutes(value) 设置分钟数

getSeconds() 获取秒数，范围0~59