用js写一个电子时钟

最新推荐文章于 2024-01-31 16:02:42 发布

小啦白啦白

最新推荐文章于 2024-01-31 16:02:42 发布

阅读量1.4k

点赞数 2

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_40710210/article/details/105280809

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用js写一个电子时钟

显示时分秒的电子时钟


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>电子表</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: solid 5px #5f5f5f;
            position: relative;
            margin: 0 auto;
        }
        #div {
            position: absolute;
            height: 50px;
            width: 180px;
            margin-top: 36%;
            margin-left: 3%;
            border: solid 5px #5f5f5f;
            display: inline-block;
            text-align: center;
            line-height: 50px;
            font-size: 28px;
        }
    </style>
</head>
<body οnlοad="startime()">
    <div class="box">
        <div id="div"></div>
    </div>
    <script>
        function startime() {
            var t = new Date();
            var h = t.getHours();
            var m = t.getMinutes();
            var s = t.getSeconds();
            // document.getElementById("div").innerHTML = h + ':' + m + ':' + s;
            m = checkTime(m);
            s = checkTime(s);
            t = setTimeout("startime()", 1000);
            //1000微秒=1秒
            document.getElementById("div").innerHTML = h + ':' + m + ':' + s;
        }
        function checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }
    </script>
</body>

</html>

运行界面

如下在这里插入图片描述每秒刷新一次

小啦白啦白

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
用js写一个电子时钟

用js写一个电子时钟显示时分秒的电子时钟<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>电子表</title> <style> .box{ width: 200px; ...
复制链接

扫一扫