html动态文字时钟

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

原创最新推荐文章于 2024-08-01 16:15:33 发布 · 627 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

本文介绍了如何使用HTML、CSS和JavaScript创建一个简单的动态实时计时器，页面背景为黑色，时间以白色大字体显示在页面中心，每秒自动更新。

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

显示效果：

效果如图所示！

页面代码

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: black;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    #clock {
      font-size: 160px; /* 增加字体大小 */
      color: white;
    }
  </style>
</head>
<body>
<div id="clock"></div>

<script>
  function updateClock() {
    const clockElement = document.getElementById('clock');
    const now = new Date();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds()+1;

    const formattedTime = `${hours.toString().padStart(2, '0')} : ${minutes.toString().padStart(2, '0')} : ${seconds.toString().padStart(2, '0')}`;
    clockElement.textContent = formattedTime;
  }

  // 初始化页面时更新时间
  updateClock();

  // 每秒更新一次时间
  setInterval(updateClock, 1000);
</script>
</body>
</html>