如何使用 HTML、CSS 和 JavaScript 创建模拟时钟?
在本教程中，我们将借助 HTML 和 CSS 设计一个模拟时钟，并使用 JavaScript 使其工作，以小时、分钟和秒格式显示当前时间。
方法
我们将使用 Date 对象，并通过一些计算显示 小时、分钟 和 秒。
我们将从 JavaScript 对象 Date() 获取系统时间，该对象具有 getHours()、getSecond() 和 getMinutes() 等函数。
获取 小时 后， 分和秒格式，我们将应用来转换所有三个指针(时、分、秒)的旋转。
模拟时钟通过三个指针连续移动来显示时间，为了显示时间，它标记了从 1 到 12。
HTML
创建一个名为 index.html 的 HTML 文件并添加一些样板代码，这些代码是如下所示的基本 html 语法，在 HTML 代码中使用一个 div，并将其命名为"sizeOfAnalog"，并在这三个 div 中使用相同的类名"sizeOfAnalog"，名称分别为 hour_clock、minute_clock、second_clock。
CSS
我们将在 HTML 代码中添加内部 CSS 和内部 JavaScript。使用 <style></style>可以应用标签内部 CSS，也可以使用 <script></script> 来应用内部 JavaScript。
JavaScript
在 JavaScript 部分，我们执行主要逻辑工作。我们将使用 JavaScript Date() 对象及其函数 getHours()、getSecond() 和 getMinutes() 获取当前时间(以小时、分钟和秒为单位)。获取时、分、秒格式后，我们将应用转换旋转来旋转所有三个指针(时、分、秒)。
步骤
步骤 1 - 我们使用 “background: url(clock.png) no-repeat;” 代码在屏幕上应用时钟的背景图像，这里的 no-repeat 是为了防止图像重复。
步骤 2 - 现在我们将使用 Date() 对象获取当前时间，并且我们可以分别从 Date 对象获取当前时、分、秒。现在我们将从 HTML 代码中获取时、分、秒，并将指针的旋转转换为 360 度。
步骤 3 - 我们知道 360 度之后将被视为一次旋转。因此，如果想要从这 360 度中获得总共 12 小时，可以使用 (360/12) 来完成，即一小时内 30 度。
步骤 4 - 分钟也是一样，因为我们总共需要 60 分钟，360 度，因此可以使用 (360/60) = 每分钟需要 6 度。
步骤 5 - 在 JavaScript 部分使用 setInterval() 我们可以每 1000ms(毫秒)运行一次设置时钟，因为 1 秒等于 1000ms。
因此我们使用 new Date()
创建日期对象获取值介于 0 到 23 之间的小时 getHours()
获取值介于 0 到 59 之间的分钟getMinutes()
获取 0 到 59 之间的秒数 getSeconds()
步骤 6 - 获取所有三个值后，我们将旋转每个指针，我们的模拟时钟将开始显示时间。
示例(完整程序)
以下是使用 HTML、CSS 和 JavaScript 创建模拟时钟的完整代码。
<!DOCTYPE html>
<html>
<head>
<title>Analog Clock Tutorials Point</title>
<style>
#sizeOfAnalog {
position: relative;
background: url(https://www.tutorialspoint.com/assets/questions/tmp/clock.png) no-repeat;
background-size: 100%;
margin-top: 2%;
margin: auto;
height: 90vh;
width: 90vh;
}
#hour_clock {
position: absolute;
background: black;
border-radius: 10px;
transform-origin: bottom;
height: 25%;
top: 25%;
left: 48.85%;
opacity: 0.8;
width: 2%;
}
#minute_clock {
position: absolute;
background: black;
border-radius: 10px;
transform-origin: bottom;
left: 48.9%;
opacity: 0.8;
width: 1.6%;
height: 32%;
top: 18%;
}
#second_clock {
position: absolute;
background: black;
border-radius: 10px;
transform-origin: bottom;
width: 1%;
height: 36%;
top: 14%;
left: 50%;
opacity: 0.8;
}
</style>
</head>
<body>
<div id="sizeOfAnalog">
<div id="hour_clock"></div>
<div id="minute_clock"></div>
<div id="second_clock"></div>
</div>
<script>
var hour = document.getElementById("hour_clock");
var minute = document.getElementById("minute_clock");
var seconds = document.getElementById("second_clock");
var addClock = setInterval(function clock() {
var date_now = new Date();
var hr = date_now.getHours();
var min = date_now.getMinutes();
var sec = date_now.getSeconds();
var calc_hr = hr * 30 + min / 2;
var calc_min = min * 6;
var calc_sec = sec * 6;
hour.style.transform = "rotate(" + calc_hr + "deg)";
minute.style.transform = "rotate(" + calc_min + "deg)";
seconds.style.transform = "rotate(" + calc_sec + "deg)";
}, 1000);
</script>
</body>
</html>
