页面实时显示时间

最新推荐文章于 2025-06-06 10:16:04 发布

原创最新推荐文章于 2025-06-06 10:16:04 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

j 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的简单网页，该网页能够实时显示当前时间，并每秒自动更新。

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

!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_页面实时显示时间.html</title>
<style>
  #colock{
   width: 280px;
   height: 80px;
   border-radius: 10px;
   margin: 0 auto;
   text-align: center;
   background-color: silver;
   padding-top: 20px;
  }
  span{
   font-size: 38px;
   color: cyan;
  }
</style>
</head>
<body>
<div id="colock">
  <span></span>
  <span>:</span>
  <span></span>
  <span>:</span>
  <span></span>
</div>
</body>
</html>
<script>
var span=document.getElementsByTagName('span');
    function time(){
  var dt=new Date();
  var h=dt.getHours();
  var m=dt.getMinutes();
  var s=dt.getSeconds();
  span[0].innerHTML=(h<10) ? '0'+h :h;
  span[2].innerHTML=(m<10) ? '0'+m :m;
  span[4].innerHTML=(s<10) ? '0'+s :s;
}
time();
var timer=null;
timer=setInterval(fun,1000);
function fun(){
  time();
}
</script>

代码结果如下：