js获取当前时间，自动刷新（简易时钟）

最新推荐文章于 2023-12-24 08:08:14 发布

zhouwei922

最新推荐文章于 2023-12-24 08:08:14 发布

阅读量2.7k

点赞数 1

分类专栏： web前端学习文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/zhouwei922/article/details/107669169

版权

web前端学习专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用HTML5、CSS和JavaScript创建简易时钟的方法。通过设置定时器，实时更新显示当前时间，包括小时、分钟和秒，并采用统一的格式化处理，确保了时间的准确性和美观性。

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>简易时钟</title>
  <style type="text/css">
   h1{
    text-align: center;
   }
   #box{
    width: 300px;
    height: 60px;
    background-color: saddlebrown;
    text-align: center;
    line-height: 60px;
    font-size: 50px;
    color: white;
    margin: 0 auto;
   }
  </style>
 </head>
 <body>
  
  <script type="text/javascript">
   window.onload = function(){
    setInterval(NowTime,1000);
    NowTime();
    function NowTime(){
     var box = document.getElementById('box');
     var a = new Date();
     var b = a.getHours();
     var c = a.getMinutes();
     var d = a.getSeconds();
     box.innerHTML = check(b)+":"+check(c)+":"+check(d);
    };
    
    function check(val){
     if(val < 10){
      return("0" + val)
     }else{
      return(val)
     }
    }
   }
  </script>
  <h1>简易时钟</h1>
  <div id="box" ></div>
 </body>
</html>