步骤5：在时钟上添加三个指针（小时、分钟、秒）
至此，我们已经完成了手表的基本设计。现在我们将向手表添加三个指针。当我们设置一些时间时，我们将其设置为小时、分钟和秒。所以在这种情况下，我也将使用三只手来创建以下 HTML 编程代码。
<div class='hr-wrapper'> <div class='hand hr'></div> </div> <div class='min-wrapper'> <div class='hand min'></div> </div> <div class='sec-wrapper'> <div class='hand sec'></div> </div>
步骤6：把每只手都摆好
我使用了以下 CSS，我只设计了时针。现在的问题可能是这些手如何定期旋转。
让我告诉你 - 如果你查看你的 CSS，你会明白这些手的一侧的位置是绝对的。结果，那个方向保持完全稳定，另一侧继续旋转。
.hr-wrapper, .min-wrapper, .sec-wrapper { position: absolute; width: 320px; height: 320px; } .hand { position: absolute; bottom: 50%; transform-origin: 50% 100%; } .hr { background: #222; left: 152px; width: 13px; height: 105px; border-radius: 10px; animation: rotateHand 43200s linear infinite; } .hr:after { background: #222; border-radius: 50%; content: ""; display: block; position: absolute; bottom: -8px; width: 13px; height: 16px; }
我使用以下代码来设计分针。让我告诉你一件事，如果你想增加这些切口的长度和高度，你可以很容易地做到。
.min { background: #222; left: 155px; width: 9px; height: 125px; border-radius: 8px; animation: rotateHand 3600s linear infinite; } .min:after { background: #222; border-radius: 50%; content: ""; display: block; position: absolute; bottom: -8px; width: 9px; height: 16px; }
我已经使用以下代码进行了二手设计。您会注意到，我已在此处指示使用@keyframes rotateHand旋转此秒针。
.sec { background: #d00; left: 156.5px; width: 5px; height: 132px; border-radius: 8px; animation: rotateHand 60s linear infinite; } .sec:after { background: #d00; border-radius: 50%; content: ""; display: block; position: absolute; bottom: -3.5px; width: 5px; height: 7px; } @keyframes rotateHand { to { transform: rotate(1turn); } }
步骤7：添加 JavaScript 代码以激活时钟
到目前为止，我们只设计了它。现在我们将激活这个手表。
// 获取当前时间 var dateInfo = new Date(); var hr = dateInfo.getHours() > 12 ? dateInfo.getHours() - 12 : dateInfo.getHours(), min = dateInfo.getMinutes(), sec = dateInfo.getSeconds(), milsec = dateInfo.getMilliseconds();
步骤8：确定手动时钟的旋转
我先告诉过你，手表的指针一部分是固定的，另一部分是旋转的。该旋转将由 JavaScript 代码控制。
正如我之前所说，一小时等于 30 度（1 hr = 30°），一分钟等于 6 度（1 min = 6°），一秒等于 6 度（1 sec = 6°）。
我将手动将当前时钟乘以 30 以根据指定时间旋转时钟的切割。假设我们增加了分钟数，以将时钟指针保持在更整洁和精确的位置。
例如，如果我告诉你，如果时钟当前在 03:30，那么根据规则，时针将在 90 度。在这种情况下，永远不会显示确切的时间。因为我们知道在 03:30 的情况下，时钟的指针将在 3 和 4 之间的某个位置。这意味着指针将略高于 90 度。
为了确定这件事，我们添加了时针到分针的距离。这样时钟的指针就会在正确的位置。我已经指示了相同的分钟和秒针旋转方法。
如果您了解基本的 JavaScript 编程代码，那么希望您能理解这种设计。
var hrAngle = hr * 30 + (min * 6 / 12), minAngle = min * 6 + (sec * 6 / 60), secAngle = sec * 6 + (milsec * 0.36 / 1000); // 设置手部包装纸的初始角度 function setAngle(wrapper, angle) { document.querySelector("." + wrapper).style.transform = "rotate(" + angle + "deg)"; } setAngle("hr-wrapper", hrAngle); setAngle("min-wrapper", minAngle); setAngle("sec-wrapper", secAngle);