在本文中，我将向您介绍如何使用 HTML、CSS 和 JavaScript 制作模拟时钟。我已经设计了很多类型的模拟时钟。这款手表采用深色新拟物风格设计的形状。就像典型的模拟风筝一样，用三个指针来指示小时、分钟和秒。在这里，我使用了符号而不是 1 到 12 的数字。
您可以查看演示以了解该模拟时钟的工作原理。我借助 neumorphism（新拟物风格） 设计了它，我在时钟的背景和页面的背景中使用了相同的颜色。首先，我 30 rem width and 30 rem height 在网页上制作了一个盒子。用 Border-radius 50% 来环绕这个盒子。我在这里使用了 box-shadow 来实现 neumorphism 的设计。
总的来说这很简单。下面我将展示我是如何制作模拟时钟的完整步骤。首先，您需要创建一个 HTML 和 CSS 文件。请将您的 CSS 文件 link 到 html 文件。
第 1 步：创建时钟的基本结构
我使用以下 HTML 和 CSS 代码制作了这个模拟时钟的背景。我使用代码创建了这个时钟的结构<div class = "clock"></div>。首先，我background: # 282828;在 CSS 代码中给出了页面的背景颜色。
<div class="clock"> </div>
html { background: #282828; text-align: center; font-size: 10px; } body { margin: 0; font-size: 2rem; display: flex; flex: 1; min-height: 100vh; align-items: center; } .clock { width: 30rem; height: 30rem; position: relative; padding: 2rem; border: 7px solid #282828; box-shadow: -4px -4px 10px rgba(67,67,67,0.5), inset 4px 4px 10px rgba(0,0,0,0.5), inset -4px -4px 10px rgba(67,67,67,0.5), 4px 4px 10px rgba(0,0,0,0.3); border-radius: 50%; margin: 50px auto; }
第 2 步：在时钟上画两条彩色线条
我使用以下 HTML 和 CSS 代码制作了我用来指示这款手表时间的符号。首先，我使用以下代码制作了两行。我将这两行放在 90 degree angle 彼此的 a 处。然后设置 background: # 282828 使线条更亮。
<div class="outer-clock-face"> </div>
.outer-clock-face { position: relative; background: #282828; overflow: hidden; width: 100%; height: 100%; border-radius: 100%; } .outer-clock-face::after { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg) } .outer-clock-face::after, .outer-clock-face::before, .outer-clock-face .marking{ content: ''; position: absolute; width: 5px; height: 100%; background: #1df52f; z-index: 0; left: 49%; }
第 3 步：再画四条线
我使用以下 HTML 和 CSS 代码在这个时钟中又制作了四条线。使用 CSS 代码，我根据需要调整了这些线的角度。我选择使用白色，你可以用任何其他颜色。
<div class="marking marking-one"></div> <div class="marking marking-two"></div> <div class="marking marking-three"></div> <div class="marking marking-four"></div>
.outer-clock-face .marking { background: #bdbdcb; width: 3px; } .outer-clock-face .marking.marking-one { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(30deg) } .outer-clock-face .marking.marking-two { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); transform: rotate(60deg) } .outer-clock-face .marking.marking-three { -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); transform: rotate(120deg) } .outer-clock-face .marking.marking-four { -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); transform: rotate(150deg) }
第 4 步：在模拟时钟的中间画一个圆圈
我在这个钟的中间做了一个圆圈。这个圆圈位于预先绘制的线的交汇处。由此产生的线条成为了一个符号。
<div class="inner-clock-face"> </div>
.inner-clock-face { position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; background: #282828; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; z-index: 1; } .inner-clock-face::before { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border-radius: 18px; margin-left: -9px; margin-top: -6px; background: #4d4b63; z-index: 11; }
第 5 步：在时钟上画三个指针
就像普通的模拟时钟一样，我使用了三只指针来指示小时、分钟和秒。使用下面的 HTML 和 CSS 代码创建和设计了这些指针。
<div class="hand hour-hand"></div> <div class="hand min-hand"></div> <div class="hand second-hand"></div>
.hand { width: 50%; right: 50%; height: 6px; background: #61afff; position: absolute; top: 50%; border-radius: 6px; transform-origin: 100%; transform: rotate(90deg); transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } .hand.hour-hand { width: 30%; z-index: 3; } .hand.min-hand { height: 3px; z-index: 10; width: 40%; } .hand.second-hand { background: #ee791a; width: 45%; height: 2px; }
第 6 步：使用 JavaScript 代码激活模拟时钟
我们已经完成了设计这款模拟手表的工作。现在我们将在 JavaScript 的帮助下实现这个手表。我没有使用任何插件或 JavaScript 库。我只使用原生 JavaScript 让这款手表的指针转动起来。即使您是初学者，也可以理解这种设计。在每个代码下面，我都完整地解释了我使用该代码的原因。
我们将使用 querySelector() 方法获取以下元素：
➤.second-hand
➤.min-hand
➤.hour-hand
const secondHand = document.querySelector('.second-hand'); const minsHand = document.querySelector('.min-hand'); const hourHand = document.querySelector('.hour-hand');
function setDate() { const now = new Date();
➤new Date() 创建 Date 类的实例，我们可以从中获取各种信息，例如当前日期、小时、分钟、秒等。
const seconds = now.getSeconds(); const secondsDegrees = ((seconds / 60) * 360) + 90; secondHand.style.transform = `rotate(${secondsDegrees}deg)`;const seconds = now.getSeconds(); const secondsDegrees = ((seconds / 60) * 360) + 90; secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
➤ 已经存储了 'secondsDegrees'，它决定秒针将如何旋转。
➤ 然后使用 rotate(${secondsDegrees}deg) 来旋转指针。
➤ 除以 60，因为 1 分钟等于 60 秒。
➤ 乘以 360，因为圆是 360 度的。
const mins = now.getMinutes(); const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90; minsHand.style.transform = `rotate(${minsDegrees}deg)`;
➤ 已经存储了 'minsDegrees'，它决定如何转动分针。
➤ 然后使用 rotate(${minsDegrees}deg) 旋转指针。
➤ 除以 60，因为 1 小时等于 60 分钟。
➤ 增加了带分钟的秒针位置。因为分针在正确的位置取决于秒。
const hour = now.getHours(); const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90; hourHand.style.transform = `rotate(${hourDegrees}deg)`; }
setInterval(setDate, 1000); setDate();
我们需要 rotate()，所以每 1 秒调用一次此函数 ( 1000 milliseconds)。
最终的 Javascript 代码
const secondHand = document.querySelector('.second-hand'); const minsHand = document.querySelector('.min-hand'); const hourHand = document.querySelector('.hour-hand'); function setDate() { const now = new Date(); const seconds = now.getSeconds(); const secondsDegrees = ((seconds / 60) * 360) + 90; secondHand.style.transform = `rotate(${secondsDegrees}deg)`; const mins = now.getMinutes(); const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90; minsHand.style.transform = `rotate(${minsDegrees}deg)`; const hour = now.getHours(); const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90; hourHand.style.transform = `rotate(${hourDegrees}deg)`; } setInterval(setDate, 1000); setDate();
希望从本教程中您已经学会了如何制作这个模拟时钟。如果您有任何问题，可以通过评论和我讨论。当然，如果我做错了什么，你也可以告诉我。
原文地址：Simple Analog Clock Using Html, CSS & Javascript
转载已征得原作者同意。
