JavaScript实现网页电子时钟

2023年5月27日下午1:11 • JavaScript

下面是JavaScript实现网页电子时钟的完整攻略:

1. 创建HTML结构

在HTML中，我们需要创建与时钟相关的结构，通常是一个div容器，里面包含用于显示时间的三个子容器(小时、分钟、秒钟)。

<div class="clock">
  <div class="hour"></div>
  <div class="minute"></div>
  <div class="second"></div>
</div>

2. 样式设计

控制宽高、背景色、边框、字体样式等性质。当然也可以按照自己的喜好自行设置。

.clock {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid #333;
  border-radius: 50%;
  background-color: #fff;
  font-family: 'Arial', sans-serif;
  position: relative; /* 用于定位子元素 */
}

.hour, .minute, .second {
  position: absolute; /* 相对定位相对于 .clock 元素，后面确定位置 */
  width: 6px;
  height: 6px;
  background-color: #333;
  border-radius: 50%;
}

.hour {
  width: 40px;
  height: 40px;
  background-color: #333;
}

3. 编写JavaScript

3.1 获取当前时间

在JavaScript中，我们可以通过 Date() 函数获取当前时间，并利用它来更新时钟。

const hourHand = document.querySelector(".hour");
const minuteHand = document.querySelector(".minute");
const secondHand = document.querySelector(".second");

function setDate() {
  const now = new Date();
  const seconds = now.getSeconds();
  const minutes = now.getMinutes();
  const hours = now.getHours();
  // ...
}

3.2 计算位置

我们知道时钟的表盘是由12个小时组成的，为了使用角度表示每个时刻，我们将时钟表面分为12份，每份30度。这样第1个小时在0度，第2个小时在30度，以此类推。

function setDate() {
  const now = new Date();
  const seconds = now.getSeconds();
  const minutes = now.getMinutes();
  const hours = now.getHours();
  const secondsDegrees = (seconds / 60) * 360 + 90; // 计算秒针角度
  const minutesDegrees = (minutes / 60) * 360 + 90 + (seconds / 60) * 6; // 计算分针角度
  const hoursDegrees = (hours / 12) * 360 + 90 + (minutes / 60) * 30; // 计算时针角度
  // ... 
}

上面的 + 90 和 + 30/6 是为了让针从顶部开始而不是从右侧开始。

3.3 更新时钟

将计算得到的角度应用于相应的针上。

hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

3.4 执行更新

每1秒钟执行一次更新。

setInterval(setDate, 1000);

完整示例

这里给出一个完整的使用JavaScript实现电子时钟的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>电子时钟</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="clock">
    <div class="hour"></div>
    <div class="minute"></div>
    <div class="second"></div>
  </div>

  <script>
    const hourHand = document.querySelector(".hour");
    const minuteHand = document.querySelector(".minute");
    const secondHand = document.querySelector(".second");

    function setDate() {
      const now = new Date();
      const seconds = now.getSeconds();
      const minutes = now.getMinutes();
      const hours = now.getHours();
      const secondsDegrees = (seconds / 60) * 360 + 90;
      const minutesDegrees = (minutes / 60) * 360 + 90 + (seconds / 60) * 6;
      const hoursDegrees = (hours / 12) * 360 + 90 + (minutes / 60) * 30;
      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
      minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
      hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
    }

    setInterval(setDate, 1000);
  </script>
</body>
</html>

运行后将会显示一个电子时钟，实时更新。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现网页电子时钟 - Python技术站