JavaScript 做一个简单的数字时钟（只有时分秒）

倔强的青铜崽

已于 2024-04-28 17:13:47 修改

阅读量2.2k

点赞数 3

分类专栏：零零碎碎、点点滴滴文章标签： javascript html

于 2020-08-12 00:55:00 首次发布

本文链接：https://blog.csdn.net/Zertuler/article/details/107948389

版权

零零碎碎、点点滴滴专栏收录该内容

6 篇文章 0 订阅

订阅专栏

制作一个很简单的数字时钟（只有时分秒）

<style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            background: #333;
        }

        .clock {
            width: 450px;
            height: 110px;
            background: #000000;
            margin: 20px auto;
            color: #f7c08a;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 100px;
            font-weight: bold;
        }
    </style>
    <body>
        <div class="clock">
        <div id="clockTime"></div>
    </div>
    </body>
    <script>
        
        showDateTime();
        //设置定时器，自动更新时间显示
        let timer = setInterval(showDateTime,1000);
        
        function showDateTime(){
            //获取系统时间
            let hour = new Date().getHours();
            let minute = new Date().getMinutes();
            let second = new Date().getSeconds();
            //搞一个空字符串
            let showTime = "";
            //把时间显示的格式放进去
            showTime = hour+":"+minute+":"+second;
            //然后在网页上显示出来
            document.getElementById("clockTime").innerHTML = showTime;
        }


    </script>

运行：

倔强的青铜崽

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
JavaScript 做一个简单的数字时钟（只有时分秒）

制作一个很简单的数字时钟（只有时分秒）<style> * { padding: 0; margin: 0; box-sizing: border-box; } body { background: #333; } .clock { width: 450px; hei
复制链接

扫一扫