Html动态时钟实例

最新推荐文章于 2025-07-08 13:52:08 发布

演员赵诗绎

最新推荐文章于 2025-07-08 13:52:08 发布

阅读量1.4w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： java web 文章标签： html 时钟动态实例教程

本文链接：https://blog.youkuaiyun.com/u013144287/article/details/77596058

java web 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用HTML和JavaScript创建一个动态时钟。通过设置HTML结构和样式，结合JavaScript的Date对象，每秒更新时间显示，实现了数字时钟的效果。在Hbuilder环境下构建，时钟数字以图片形式展示，并提供了最终的运行效果和背景故事。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Html动态时钟实例

时间已经成为我们每天必不可少的一个元素，我们是否想过用html来实现一款动态的实时时钟呢？今天我就与大家分享一下html动态时钟的实现过程，项目用Hbuilder构建。
一、代码目录结构如图所示

二、dynamictime.html

<html>
<head>
    <title>html动态时钟</title>
    <style>
        body {
            margin: 0;
        }

        #div19 {
            font-size: 40px;
            position: absolute;
            left: 880px;
            top: 240px;
            width: 400px;
            height: 200px;
        }
    </style>
    <script>
        //实现数码时钟
        function fun(string) {
            if (string <= 9) {
                return "0" + string;
            }
            else {
                return "" + string;
            }
        }
        window.onload = function () {
            var aadiv = document.getElementById('div19');
            var test = aadiv.getElementsByTagName('img');
            function time() {
                var date = new Date();
                var str = fun(date.getHours()) + fun(date.getMinutes()) + fun(date.getSeconds());

                for (var i = 0; i < test.length; i++) {

                    test[i].src = '../image/' + str[i] + '.png';
                }
            }
            setInterval(time, 1000);
            time();
        }

    </script>
</head>
<body>
    <div id="div18">
        <img style="width:100%; " src="../image/psb.jpg" />
        <div id="div19">
            <img src="../image/0.png" />
            <img src="../image/0.png" />
            ：
            <img src="../image/0.png" />
            <img src="../image/0.png" />
            ：
            <img src="../image/0.png" />
            <img src="../image/0.png" />
        </div>
    </div>
</body>
</html>

三、效果