使用JS做一个简单的时钟

向右看齐 2023-06-27 12:49 62阅读 0赞

这是一个简单的小功能,直接上代码,样式可以自己选择

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #timeClock{ 
                margin:50px auto;
                text-align: center;
                font-size: 30px;
                width: 500px;
                height: 100px;
                line-height: 100px;
                color:#f40;
                background-color:#000;
            }
        </style>
    </head>
    <body>
    <div id="timeClock"></div>
    </body>
    <script>
      var nowTime=  function nowTime(){ 
            //获取当前时间，算出小时，分钟，秒。
            var dateTime = new Date();
            var hour = dateTime.getHours();
            var min = dateTime.getMinutes();
            var sec = dateTime.getSeconds();
            //调用函数 补0
            checkTime(min);
            checkTime(sec);
            document.getElementById('timeClock').innerHTML = checkTime(hour) + '时' + checkTime(min) + '分' + checkTime(sec) + '秒';
        }
        //定义一个定时器
        setInterval(nowTime,1000);
        //给小时，分钟，秒，不足10的数前面补一个0.
        function checkTime(num){ 
            if(num < 10){ 
                return '0' + num;
            }
            else if(num >= 10){ 
                return '' + num;
            }
        }
        nowTime();
    </script>
    </html>

效果如下:  
![在这里插入图片描述][20200106222714972.png]

[20200106222714972.png]: https://img-blog.csdnimg.cn/20200106222714972.png

发表评论取消回复

表情：

评论列表（有 0 条评论，62人围观）

还没有评论，来说两句吧...

相关阅读

相关做一个简单网页(做一个简单网页多少钱)

怎样做一个简易的网页？做一个简单网页多少钱做一个简易的普通网页比较容易。当然，制作的方法有好几种，有的是直接写代码、有的是用绘图软件绘制页面再导出网页、常用的是使用网页

谁践踏了优雅/ 2023年09月23日 18:38/ 0 赞/ 173 阅读

相关使用JS做一个简单的时钟

这是一个简单的小功能,直接上代码,样式可以自己选择 <!DOCTYPE html> <html lang="en"> <head> <

向右看齐/ 2023年06月27日 12:49/ 0 赞/ 63 阅读

相关时钟c语言自动同步,c语言——做一个简单的计时器/时钟

闲来无事看到桌面右下角的时钟，就想仿照做一个数字时钟，小白在此，仅供消遣，大神勿喷O(∩\_∩)O~ \include \include \include \inclu

ゞ浴缸里的玫瑰/ 2023年01月22日 12:57/ 0 赞/ 223 阅读

相关用php写一个时钟效果,利用html 5制作一个简单的时钟效果

![37a50fe9642348f4082f4d342d038335.png][] 我们先来看看最终效果： ![9181896cb5cdf03ce399f27562719d

骑猪看日落/ 2023年01月15日 10:26/ 0 赞/ 233 阅读

相关使用JS方法做一个简单地本地数据加密解密

先看代码，复制使用即可，（您将看到以下效果） ![描述图片][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

深碍√TFBOYSˉ_/ 2022年12月13日 04:37/ 0 赞/ 70 阅读

相关亲手做一个超低功耗的时钟

[软硬件开源的低功耗时钟，支持温湿度显示][Link 1] [（点击链接阅读原文）][Link 1] [Link 1]: https://mp.weixin.q

旧城等待，/ 2022年09月10日 06:21/ 0 赞/ 140 阅读

相关使用node.js做一个简单的服务器

哥们初学node.js，只是为了建一个简单的服务器，然后测试一下自己写的静态网站，可能是非常简单的原因还是什么的，百度到的非常模糊，而且缺少一些东西，像我这种菜鸟很多都看不懂。

﹏ヽ暗。殇╰゛Y/ 2022年08月11日 09:00/ 0 赞/ 249 阅读

相关使用node.js做一个简单的登录注册以及邮箱验证

server服务端需要安装的几个插件 1. npm init --yes 2. npm i express 3. npm i nodemailer 4. node

墨蓝/ 2022年04月12日 03:59/ 0 赞/ 301 阅读

相关 js实现简单的网页时钟

<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title

╰+哭是因爲堅強的太久メ/ 2022年02月22日 16:52/ 0 赞/ 361 阅读

相关 JS实现简单时钟效果

老师上课需要我们做一个时钟的小作业，我把它放在上面记录一下啦表盘和时针我都是用的背景图的形式，然后绝对定位，通过调整left和top确定时针、分针、秒针的位置，tran

我会带着你远行/ 2022年01月25日 15:39/ 0 赞/ 416 阅读