JavaScript的Date对象制作万年历

睡前要喝豆奶粉

已于 2023-04-21 21:35:35 修改

阅读量893

点赞数

分类专栏： JavaScript 前端文章标签：前端 javascript html

于 2022-12-10 11:29:06 首次发布

本文链接：https://blog.csdn.net/yinghanhanhan/article/details/128263138

版权

本文介绍了如何利用JavaScript的Date对象创建一个万年历。通过在页面上设置<select>元素来选择年份和月份，结合<ul>元素显示星期和日期。JavaScript脚本动态更新年份和月份，并根据选中值确定当月第一天的星期，绘制日历。同时，根据所选年月计算总天数并完成日历的填充，最后为<select>设置onchange事件以响应日期的切换。

摘要由CSDN通过智能技术生成

要求：

选择不同的年份和月份，在页面中显示当前月的日历

思路：

在页面上添加两个<select>标签，用来显示年份和月份；同时添加两个<ul>标签，一个用来显示星期，另一个用来显示日期

在JavaScript脚本中动态添加年份和月份，获取当前日期的年份和月份，显示到<select>标签上

根据<select>标签上显示的value值，获取当前选中年月的第一天是星期几，并绘制空<li>标签

获取当前选中的年月一共有多少天，并绘制对应的<li>标签

为两个<select>标签设置onchange时间

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #calendar{
            width: 700px;
            background-color: lightgray;
            margin: 20px auto;
        }
        #month-year{
            width: 700px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        ul li{
            float: left;
            width: 100px;
            he