电子时钟的设计与实现

最新推荐文章于 2024-03-02 10:42:40 发布

JiaBr006

最新推荐文章于 2024-03-02 10:42:40 发布

阅读量507

点赞数 16

文章标签： js javascript html

本文链接：https://blog.csdn.net/m0_71772930/article/details/135039578

版权

通过学习JavaScript知识，实现时钟动态效果

时钟动态效果的实现

使用 document.getElementById0方法获取用于显示时分秒的3个显示框对象。
在 JavaScript 中创建自定义函数方法 getCurrentTime（），用于获取当前时间并显示在页面中。

在该段代码中首先使用了 JavaScript 中的Date 对象获取当前时间的时分秒具体数值，为确保每次均显示成两位数的效果，分别判断当前时分秒是否小于 10，如果比10 小则在前面加一个数字 0，然后将修改后的数值使用 innerHTML 属性显示到对应的时间显示框中。

将 getCurrentTime（）函数添加到<body>标签的 onload 事件中，以确保每次打开页面就立刻显示当前时间。
最后在 JavaScript 代码部分添加 setlnterval（）方法，设置成每秒钟重新调用一次获取当前时间并显示在页面上的 getCurrentTime（）函数。

setInterval("getCurrentTime()", 1000);

其中，第1个参数表示的是需要调用的函数名称；第2个参数表示的是间隔时间，其单位毫秒，1000毫秒=1秒。

图1-1电子时钟的样式效果图

由图1-1可见，时钟显示的内容动态变化的功能已实现。至此，电子时钟的制作己全部完成。

源代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单时钟设计实现</title>
    <style>
        #clock {
            width: 800px;
            font-size: 80px;
            font-weight: bold;
            color: red;
            text-align: center;
            margin: 20px;
        }

        .box1 {
            margin-right: 10px;
            width: 100px;
            height: 100px;
            line-height: 100px;
            float: left;
            border: gray 1px solid;
        }

        .box2 {
            width: 30px;
            float: left;
            margin-right: 10px;
        }
    </style>
</head>

<body onload="getCurrentTime()">
    <h3>简单时钟设计实现</h3>
    <hr>
    <!-- 电子时钟区域 -->
    <div id="clock">
        <div class="box1" id="h"></div>
        <div class="box2">:</div>
        <div class="box1" id="m"></div>
        <div class="box2">:</div>
        <div class="box1" id="s"></div>
    </div>


    <script>
        var hour = document.getElementById("h");
        var minute = document.getElementById("m");
        var second = document.getElementById("s");

        function getCurrentTime() {
            var date = new Date();
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();
            if (h < 10)
                h = "0" + h;
            if (m < 10)
                m = "0" + m;
            if (s < 10)
                s = "0" + s;
            hour.innerHTML = h;
            minute.innerHTML = m;
            second.innerHTML = s;
        }
        
        setInterval("getCurrentTime()", 1000);
    </script>
</body>

</html>