在HTML中如何动态显示时间

最新推荐文章于 2024-08-01 16:15:33 发布

时光不顾

最新推荐文章于 2024-08-01 16:15:33 发布

阅读量4.9k

点赞数 1

分类专栏： js 文章标签： html

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
   <script>
       var timer=null;
       function displayClock(num){//num是传入的startClock中的动态值
           if(num<10){
               return "0"+num;
           }
           else{
               return num;
           }
       }
       //停止计时
       function stopClock(){
           clearTimeout(timer);
       }
       //开始计时
       function startClock(){
           var time =new Date();
           var hours=displayClock(time.getHours())+":";
           var minutes=displayClock(time.getMinutes())+":";
           var seconds=displayClock(time.getSeconds());
           //显示时间
           show.innerHTML=hours+minutes+seconds;//在id为show的块区域显示
           timer=setTimeout("startClock()",1000);//延时器
       }
   </script>
</head>
<style>
   #show{
       font-size: 24px;
       color:#4213C9;
       text-align:center;
   }
   </style>
<body οnlοad="startClock()" οnunlοad="stopClock()">
   <div id="show"></div>
</body>
</html>