js简单电子时钟

最新推荐文章于 2022-08-18 23:41:47 发布

阿寮

最新推荐文章于 2022-08-18 23:41:47 发布

阅读量2.2k

点赞数 6

分类专栏：笔记

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js简单电子时钟

功能要求：设计一款简单的电子时钟，要求实现显示当前的时分秒，并且可以每秒更新一次实现动态效果。最终效果如图所示
在这里插入图片描述
用JavaScript代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易时钟</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        h1{
            margin-bottom: 20px;
        }
        .all{
            font-size: 50px;
            color: red;
            margin-top: 20px;
        }
        .all span{
            width: 100px;
            height: 100px;
            display: inline-block;
            float: left;
            margin-left: 20px;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 100px;
        }
        p{
            display: inline-block;
            float: left;
            text-align: center;
            line-height: 100px;
            width: 20px;
            height: 100px;
        }
    </style>
    <script>
        window.onload=function () {
            function tick() {
                var myDate=new Date();
                var h=myDate.getHours();
                var m=myDate.getMinutes();
                var s=myDate.getSeconds();
                document.getElementById('msg1').innerText=(toDou(h));
                document.getElementById('msg2').innerText=(toDou(m));
                document.getElementById('msg3').innerText=(toDou(s));
            }
            tick();
            setInterval(tick,1000);
        }
        function toDou(n){
            if(n<10)
            {
                return '0'+n;
            }
            else
            {
                return ''+n;
            }
        }
    </script>
</head>
<body>
<h1>简单电子时钟的设计与实现</h1>
<hr>
<div class="all">
   <span id="msg1"></span>
    <p>:</p>
   <span id="msg2"></span>
    <p>:</p>
   <span id="msg3"></span>
</div>
</body>
</html>

下一篇：数码时钟，将数字用图片替换。

阿寮

关注

6
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
js简单电子时钟

js简单电子时钟功能要求：设计一款简单的电子时钟，要求实现显示当前的时分秒，并且可以每秒更新一次实现动态效果。最终效果如图所示用JavaScript代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简易时钟</...
复制链接

扫一扫