用js计时器实现数字时钟

最新推荐文章于 2024-07-02 12:22:49 发布

切图仔七七

最新推荐文章于 2024-07-02 12:22:49 发布

阅读量2.6k

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_61629964/article/details/122276243

版权

代码如下

<!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>
    <style>
        /*  首先给盒子设置样式,因人而异 */
        .box {
            width: 230px;
            height: 100px;
            background-color: #fff;
            box-shadow: 1px 1px 20px 4px #8888;
            text-align: center;
            line-height: 100px;
            margin: 100px auto;
            font-size: 40px;
            color: #000;
            display: flex;
            justify-content: space-evenly;
        }
    </style>
</head>

<body>
    <div class="box" id="box"></div> <!-- 创建一个div用来显示时间内容 -->

    <script>
        let box=document.getElementById('box');//获取box元素
        time(); //方法写好之后先调用一遍,因为刚开始打开网页默认内容是div本身的内容
        //所以就先调用一遍让它显示返回的内容
        function time() {
            let date = new Date(); //创建时间对象
            let Hours = date.getHours(); //获取时
            let Min = date.getMinutes(); //获取秒
            let Sec = date.getSeconds(); //获取分

            //下面3元表达式作用是,假如说当时分秒的数字是123这种类型的个数
            //就会显得不好看,所以要判断,如果小于10,就在数字的前面加上一个字符串的0,
            //如果大于10就直接不显示字符串的0;
            Hours = Hours < 10 ? '0' + Hours : Hours;
            Min = Min < 10 ? '0' + Min : Min;
            Sec = Sec < 10 ? '0' + Sec : Sec;
            //函数返回的结果是 box盒子innerHTML内容里面就是时分秒;
            return box.innerHTML = Hours + "\t:\t" + Min + "\t:\t" + Sec;
        }
        setInterval(time, 1000);
        //计时器,1000毫秒等于1秒,数字时钟显示的单位就是都是一秒切换一次的,所以就一秒钟执行一次
    </script>
</body>

</html>