在本文中,我们将创建一个模拟时钟。这主要基于 HTML、CSS 和 Vanilla JavaScript。
方法:
- 创建一个 HTML 文件,我们将在其中添加主 div,然后我们将添加 4 个 div 标签,分别表示小时、分钟、秒针和大头针。
- 创建一个 CSS 文件来为我们的网页设计样式并为不同的手分配不同的长度。
- 创建一个 JavaScript 文件,用于创建不同时钟指针旋转的简短逻辑。
时钟指针旋转的逻辑:
1. 时针
For Achieving 12hrs,
hour hand moves 360deg.
i.e. 12hrs ⇢ 360degs
so, 1hr ⇢ 30degs
and, 60mins ⇢ 30degs
so, 1min ⇢ 0.5degs
Total Rotation of hour hand:
(30deg * hrs) + (0.5deg * mins)
2. 分针
For Achieving 60mins,
hour hand moves 360deg.
i.e. 60mins ⇢ 360degs
so, 1min ⇢ 6degs
Total Rotation of minute hand:
6deg * mins
3. 二手
For Achieving 60secs,
hour hand moves 360deg.
i.e. 60secs ⇢ 360degs
so, 1sec ⇢ 6degs
Total Rotation of minute hand:
6deg * secs
HTML代码:
HTML
Analog Clock
Javascript
// Selecting all of the css classes on which
// we want to apply functionalities
const hr = document.querySelector('.hr')
const min = document.querySelector('.min')
const sec = document.querySelector('.sec')
// Setting up the period of working
setInterval(() => {
// Extracting the current time
// from DATE() function
let day = new Date()
let hour = day.getHours()
let minutes = day.getMinutes()
let seconds = day.getSeconds()
// Formula that is explained above for
// the rotation of different hands
let hrrotation = (30 * hour) + (0.5 * minutes);
let minrotation = 6 * minutes;
let secrotation = 6 * seconds;
hr.style.transform =
`translate(-50%,-100%) rotate(${hrrotation}deg)`
min.style.transform =
`translate(-50%,-100%) rotate(${minrotation}deg)`
sec.style.transform =
`translate(-50%,-85%) rotate(${secrotation}deg)`
});
HTML
代码说明:
- 首先,创建一个 HTML 文件 (index.html)。
- 现在在创建我们的 HTML 文件之后,我们将使用
标签为我们的网页提供一个标题。它应该放在 部分内。 - 然后我们将提供所有样式的 CSS 文件链接到我们的 HTML。这也位于 标记之间。
- 来到我们 HTML 代码的正文部分。
- 首先,创建一个主div作为时钟。
- 在那个 div 中添加 4divs 一小时、一分钟、秒针和大头针。
- 在我们的正文末尾添加