JavaScript 如何设计数字时钟

处理时间是Web开发人员最常见的概念之一。无论是为订阅期间安排时间还是安排发送电子邮件，都需要开发人员处理时间。在这篇文章中，我们将学习如何使用JavaScript设计一个数字时钟。

点击按钮获取时间

我们可以使用多种逻辑和代码来实现相同的操作。首先，在这个部分中，我们将学习如何设计一个数字时钟，当用户点击按钮时显示时间。

按照以下步骤实现：

首先，创建一个按钮，用户可以点击以查看时间。
接下来，在按钮上创建一个onClick监听器，并在点击时调用一个名为main的函数。
在main函数下定义一个数据对象。
更新所需目标元素的文本（inner HTML）以显示时间。

示例

<!DOCTYPE html>
<html>
<head>
   <title>Digital Clock</title>
   <style>
      body {
         font-family: Arial, Helvetica, sans-serif;
         text-align: center;
         margin-top: 100px;
         font-size: 50px;
         color: #333;
      }
   </style>
</head>
<body>
   <script>
      const main=()=>{
         var time=new Date();
         const n=document.getElementById("container").innerHTML = time;
      }
      main();
   </script>
   <div class="container" id="container"></div>
   <button onclick="main()">click here</button>
</body>
</html>

解释

这段代码使用JavaScript在HTML中创建了一个数字时钟。它包含一个创建新的Date对象并将其设置为时间变量的脚本。
时间然后显示在一个id为container的容器元素中。调用main()函数来初始化时钟，并包含一个带有onclick属性的按钮，允许用户更新时间。

获取个体时间

在前面的示例中，我们了解了如何在用户点击按钮时获取时间。然而，我们可能还需要动态改变时间并在我们的Web应用程序中更新它。JavaScript提供了一个叫做setInterval的方法，它在用户指定的一定时间间隔后再次调用函数。

语法

setInterval(<function name>, <time of interval>)

示例

<!DOCTYPE html>
<html>
<head>
   <title>Digital Clock</title>
</head>
<body>
   <div id="clockDisplay"></div>
   <script>
      function updateClock() {
         let date = new Date();
         let hours = date.getHours();
         let minutes = date.getMinutes();
         let seconds = date.getSeconds();
         let meridiem = "AM";
         if (hours > 12) {
            hours -= 12;
            meridiem = "PM";
         }
         if (hours === 0) {
            hours = 12;
         }
         if (minutes < 10) {
            minutes = "0" + minutes;
         }
         if (seconds < 10) {
            seconds = "0" + seconds;
         }
         let time = hours + ":" + minutes + ":" + seconds + " " + meridiem;
         document.getElementById("clockDisplay").innerHTML = time;
      }
      setInterval(updateClock, 1000);
   </script>
</body>
</html>

解释

这段代码使用JavaScript在HTML中创建了一个数字时钟。它包括一个updateClock（）函数，该函数检索当前日期并将其格式化为小时，分钟，秒钟和上下午。
setInterval（）方法用于每秒更新时钟。时间显示在一个id为clockDisplay的容器元素中。

我们可以使上述代码更加简洁。由于Date（）方法给出包含小时，分钟，秒等的时间，我们可以对它们进行数值运算以获得所需的结果。

示例

<!DOCTYPE html>
<html>
<head>
   <title>Digital Clock</title>
   <style>
      body {
         font-family: Arial, Helvetica, sans-serif;
         text-align: center;
         margin-top: 100px;
         font-size: 50px;
         color: #333;
      }
   </style>
</head>
<body onload="setInterval(() => {
      let date = new Date();
      let time = (date.getHours() % 12 || 12) + ':' + ('0' + date.getMinutes()).slice(-2) + ':' + ('0' + date.getSeconds()).slice(-2) + ' ' + (date.getHours() >= 12 ? 'PM' : 'AM');
      document.getElementById('clockDisplay').textContent = time;
   }, 1000);">
   <div id="clockDisplay"></div>
</body>
</html>