如何使用 HTML、CSS 和 JavaScript 创建模拟时钟？

PHPz 转载: 2023-08-29 11:01:02 505浏览

在本教程中，我们将借助 HTML 和 CSS 设计一个模拟时钟，并使用 JavaScript 使其工作，这将以小时、分钟和秒的格式显示当前时间。

Approach
我们将使用 Date 对象，并通过一些计算，我们将显示小时、分钟和秒。
我们将从JavaScript对象Date()获取系统时间，该对象具有诸如的函数>getHours()、getSecond() 和 getMinutes()。
获取后我们将应用小时、分钟和秒格式来转换所有三针时、分和秒的旋转。

模拟时钟通过连续移动的三只指针来显示时间，并在显示时间时标记从 1 到 12。

HTML

创建 HTML 文件命名为index.html并添加一些样板代码，这是基本的html语法，如下所示，在我们的HTML代码内有一个div，名称为“sizeOfAnalog”，在这三个div内具有相同的类名“sizeOfAnalog”，名称为hour_clock，分钟_时钟，秒_时钟。

CSS

我们将在 HTML 代码中添加内部 CSS 以及内部 JavaScript。使用标签可以应用内部CSS，使用可以应用内部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 步 - 每分钟相同，因为我们总共需要 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中文网其它相关文章！

JavaScript css html date 指针对象 background PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：为什么我们在 HTML 中使用 JavaScript？下一条：如何使用 FabricJS 当鼠标悬停在某个对象上时突出显示该对象？