JavaScript实现动态日历

Bertha 。 2022-04-17 05:19 337阅读 0赞

### [程序员学习书籍推荐][Link 1]（点击查看） ###

原生JS实现动态日历:

思路分析:

1.手写对页面进行布局

2.创建时间

3.动态的改变标签中的内容

4.实现动态日历

源代码如下:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JS实现动态日历</title>
        <style>
            *{
                margin: 0;padding: 0;
            }
    
            #box{
                width: 250px;height: 300px;background-color: orangered;margin:100px auto;padding: 20px;
            }
            #box_top{
                font-size:23px;color:#fff;padding-bottom: 40px;
            }
            #box_bottom{
                width: 90%;height: 70%;background-color: yellow;margin: 0 auto;color: #fff;font-size: 100px;
                /*伸缩布局*/
                display: flex;justify-content: center;align-items: center;
            }
        </style>
    </head>
    <body>
    <div id="box">
        <div id="box_top"></div>
        <div id="box_bottom"></div>
    </div>
    <script>
        window.onload = function(){
            /*1.获取时间*/
            var date = new Date();
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            var week = date.getDay();
            var weeks = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    
            /*2.获取标签动态改变内容*/
            $('box_top').innerText = y + '年' + m + '月' + d +'日' + weeks[week];
            $('box_bottom').innerText = d;
        };
        /*封装*/
        function $(id) {
            return typeof id === 'string' ? document.getElementById(id) : null;
        }
    </script>
    </body>
    </html>

效果图:（通过JS实现的日历是动态更新日期的）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Zlbmd5Q29kZXI_size_16_color_FFFFFF_t_70][]

[Link 1]: https://gitee.com/black-programmer/Study_Book
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Zlbmd5Q29kZXI_size_16_color_FFFFFF_t_70]: /images/20220417/976faf2dbb9a4210ba3ac78316d34022.png