溫馨提示×

html時鐘實現代碼怎么寫

小億
226
2023-07-21 15:39:04
欄目: 編程語言

以下是一個基本的HTML時鐘實現代碼示例:

html

<!DOCTYPE html>

<html>

<head>

  <title>時鐘</title>

  <style>

    .clock {

      text-align: center;

      font-size: 48px;

      font-weight: bold;

    }

  </style>

  <script>

    function updateClock() {

      var now = new Date();

      var hour = addZeroPrefix(now.getHours());

      var minute = addZeroPrefix(now.getMinutes());

      var second = addZeroPrefix(now.getSeconds());  

      var timeString = hour + ":" + minute + ":" + second;

      document.getElementById("clock").innerHTML = timeString;

      setTimeout(updateClock, 1000); // 每秒鐘更新一次時鐘

    }    

    function addZeroPrefix(num) {

      return (num < 10 ? "0" : "") + num;

    }

  </script>

</head>

<body onload="updateClock()">

  <div class="clock" id="clock"></div>

</body>

</html>

上述代碼中,我們定義了一個updateClock()函數來更新時鐘,并在頁面加載完成時調用該函數。updateClock()函數

獲取當前時間并將其顯示在具有"clock"id的<div>元素中。然后,我們使用setTimeout()函數每秒鐘調用一次

updateClock()函數,以便更新時鐘。

通過上述代碼,您可以在網頁上實現一個簡單的時鐘效果。您可以根據需要自定義CSS樣式以及時鐘顯示格式。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女