【JS】年历制作_Date对象_DOM对象子节点的增加

最新推荐文章于 2021-12-17 15:44:48 发布

JonyXin

最新推荐文章于 2021-12-17 15:44:48 发布

阅读量447

点赞数

分类专栏： js 前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46058763/article/details/121564395

版权

js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

制作年历

考察主要知识点

JS中DOM对象子节点的增加
JS内置对象Date

使用JS内置对象实现制作年历功能，根据用户输入的年份，自动生成该年的年历，比如用户输入的是2018年，效果图如下图所示：
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>年历</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul {
        list-style: none;
        font-size: 12px;
    }

    li {
        float: left;
        width: 20px;
        height: 20px;
    }

    h2 {
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        height: 20px;
        line-height: 20px;
        background-color: #ccc;
    }

    .calendar {
        width: 720px;
        height: 440px;
        margin: 0 auto;
    }

    .box {
        float: left;
        width: 140px;
        height: 140px;
        margin: 20px;
    }
</style>
<script>
    window.onload = function () {
        let year = prompt("制作年历，请输入年份：");
        let reg = /^[0-9]{1,}$/;
        //判断输入是否正确
        if ((!(year === '0')) && !reg.test(year)) {
            alert("输入错误！");
        } else {
            makeCalendar(year);
        }
    }
    /*
     * makeCalendar(year)   制作年历
     *      year    要制作的年份
     */
    function makeCalendar(year) {
        //获取元素
        let boxs = document.getElementsByClassName("box");
        let week = document.getElementById("week");

        for (let i = 0; i < 12; i++) {
            let hearder = year + "年" + (i + 1) + "月";
            createNode(boxs[i], "h2", hearder);     //添加header
            createWeek(boxs[i]);    //添加星期的文字
            let firstDay = (new Date(year, i, 1)).getDay(); //获取这个月第一天的星期数
            let monthNum = (new Date(year, i + 1, 0).getDate());    //获取这个月的天数
            createDay(boxs[i], firstDay, monthNum);

        }
    }
    /*
     * createNode() 增加子节点
     *      parent 父节点
     *      tag 要新增子节点的标签
     *      text tag标签的内容
     */
    function createNode(parent, tag, text) {
        let childNode = document.createElement(tag);
        childNode.innerText = text;
        parent.appendChild(childNode);
    }

    /*
     * createWeek() 增加星期的ul
     *      parent 父节点
     */
    function createWeek(parent) {
        let week = document.createElement("ul");
        let arr = ["日", "一", "二", "三", "四", "五", "六"];
        for (let i = 0; i < 7; i++) {
            createNode(week, "li", arr[i]);
        }
        parent.appendChild(week);       //将星期的ul添加到父节点中
    }

    /*
     * createDay()
     *      parent  父节点
     *      firstDay    一个月的第一天的星期数
     *      monthNum    一个月的天数
     */
    function createDay(parent, firstDay, monthNum) {
        let day = document.createElement("ul");
        for (let i = 0; i < firstDay; i++) {
            createNode(day, "li", "");
        }
        for (let j = 1; j <= monthNum; j++) {
            createNode(day, "li", j);
        }
        parent.appendChild(day);    //将日期的ul添加到父节点中
    }
</script>

<body>
    <div class="calendar">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

JonyXin

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【JS】年历制作_Date对象_DOM对象子节点的增加

制作年历考察主要知识点JS中DOM对象子节点的增加JS内置对象Date使用JS内置对象实现制作年历功能，根据用户输入的年份，自动生成该年的年历，比如用户输入的是2018年，效果图如下图所示：代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"
复制链接

扫一扫