在本教程中,我们将借助 HTML 和 CSS 设计一个模拟时钟,并使用 JavaScript 使其工作,这将以小时、分钟和秒的格式显示当前时间。
我们将使用 Date 对象,并通过一些计算,我们将显示小时、分钟和秒。
我们将从JavaScript对象Date()获取系统时间,该对象具有诸如的函数>getHours()、getSecond() 和 getMinutes()。
获取后我们将应用小时、分钟和秒格式来转换所有三针时、分和秒的旋转。
模拟时钟通过连续移动的三只指针来显示时间,并在显示时间时标记从 1 到 12。
创建 HTML 文件命名为index.html并添加一些样板代码,这是基本的html语法,如下所示,在我们的HTML代码内有一个div,名称为“sizeOfAnalog”,在这三个div内具有相同的类名“sizeOfAnalog”,名称为hour_clock,分钟_时钟,秒_时钟。
我们将在 HTML 代码中添加内部 CSS 以及内部 JavaScript。使用标签可以应用内部CSS,使用<script></script>可以应用内部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 步 - 每分钟相同,因为我们总共需要 360 分钟 60 分钟,因此可以使用每分钟所需的 (360/60) = 6 度来完成。
第 5 步 -在使用 setInterval() 的 JavaScript 部分中,我们可以每 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>
以上是如何使用 HTML、CSS 和 JavaScript 创建模拟时钟?的详细内容。更多信息请关注PHP中文网其他相关文章!