数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 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
我们将添加内部 CSS 以及 HTML 代码中的内部 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 度来完成，我们需要每分钟 6 度。
**步骤 5** - 在 JavaScript 部分使用 **setInterval()**，我们可以每 1000 毫秒（毫秒）运行一次 set clock，因为 1 秒等于 1000 毫秒。
因此，我们使用 **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://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>
3K+ 浏览量
