使用HTML、CSS和原生JavaScript创建响应式模拟时钟

在本文中，我们将创建一个 模拟时钟 ，主要基于HTML、CSS和原生JavaScript。

方法：
1. 创建一个HTML文件，在其中添加主要的div，然后再添加4个div标签，分别用于小时、分钟、秒钟和指针。
2. 创建一个CSS文件，用于样式化网页并为不同的指针分配不同的长度。
3. 创建一个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文件（index.html）。
现在，在创建完我们的HTML文件之后，我们将使用<title>标签为我们的网页提供一个标题。它应该放置在<head>部分中。
然后，我们将CSS文件链接到我们的HTML文件中，该文件提供所有的样式。这也放在<head>标签之间。
进入我们的HTML代码的正文部分。
- 首先，创建一个主要的div作为时钟。
- 在这个div中添加4个div，分别用于表示小时、分钟和秒针，以及指针。
- 在我们的body部分的末尾添加<script>标签，它将JS文件与我们的HTML文件链接起来。
setInterval()函数用于在特定时间段内执行一个函数。更多详细信息请点击这里。
Date()函数用于返回当前日期和时间（小时、分钟、秒）。

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <title>Analog Clock</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
    
<body> 
    <div class="clock"> 
        <div class="hr"></div> 
        <div class="min"></div> 
        <div class="sec"></div> 
        <div class="pin"></div> 
    </div> 
  
    <script src="index.js"></script> 
</body> 
    
</html>

CSS代码

/* Restoring browser effects */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    ; 
} 
  
/* All of the same styling to the body */
body { 
    height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background-color: #000; 
    background-image: linear-gradient( 
            70deg, black, white); 
} 
  
/* Sizing, positioning of main  
    dial of the clock */
.clock { 
    width: 40vw; 
    height: 40vw; 
    background-image: linear-gradient( 
                70deg, black, white); 
    background-size: cover; 
    box-shadow: 0 3em 5.8em; 
    border-radius: 50%; 
    position: relative; 
} 
  
.hr, 
.min, 
.sec { 
    width: 1%; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -100%); 
    transform-origin: bottom; 
    z-index: 2; 
    border-radius: 2em; 
} 
  
.pin { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 1em; 
    height: 1em; 
    background: rgb(38, 0, 255); 
    border: 2px solid #ffffff; 
    border-radius: 10em; 
    margin: auto; 
    z-index: 10; 
} 
  
/* Different length of different hands of clock */
.hr { 
    height: 25%; 
    background-color: #ff0000; 
} 
  
.min { 
    height: 30%; 
    background-color: #ff9900; 
} 
  
.sec { 
    height: 40%; 
    background-color: #99ff00; 
    transform-origin: 50% 85%; 
}

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、CSS和原生JavaScript创建响应式模拟时钟