使用 HTML、CSS 和 Vanilla JavaScript 的响应式模拟时钟

在本文中，我们将创建一个模拟时钟。这主要基于 HTML、CSS 和 Vanilla 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代码：

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

  

    
  
        /* 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%;
        }
    

  

    
        
        
        
        
    
  
    
  
        // 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 文件 (index.html)。
• 现在在创建我们的 HTML 文件之后，我们将使用