用Js实现一个简单的数字时钟

最新推荐文章于 2025-07-09 09:27:31 发布

原创最新推荐文章于 2025-07-09 09:27:31 发布 · 3.5k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#Js #数字时钟 #定时器

Js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及JavaScript实现的实时显示当前时间的钟表应用。该应用通过JavaScript获取当前时间，并以友好的格式展示小时、分钟和秒。页面采用简洁的设计风格，黑色背景搭配醒目的橙色字体，方便用户查看。

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

效果如下，实际效果是动态的，图片没有截GIF的。。。

<!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>
    function nowTime(){
              //获取当前时间，算出小时，分钟，秒。
                var dateTime = new Date();
                var hour = dateTime.getHours();
                var min = dateTime.getMinutes();
                var sec = dateTime.getSeconds();
                //调用函数 补0
                //小时还是别加0了=。=
                // checkTime(hour);
                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>