HTML+JavaScript模擬實現(xiàn)簡單的時鐘效果

更新時間：2022年08月12日 08:38:38 作者：海擁

在這篇文章中，主要將向大家展示如何使用?HTML、CSS?和?JavaScript代碼制作模擬時鐘，文中的示例代碼講解詳細，感興趣的可以了解一下

項目基本結(jié)構(gòu)

目錄結(jié)構(gòu)如下：

如果你想知道我是如何制作這款彩色模擬時鐘的，那么你可以按照下面的教程進行操作。要創(chuàng)建它，我們需要一個 HTML、一個 CSS 文件和一個圖像。該圖像是添加從 1 到 12 的數(shù)字。

1.創(chuàng)建一個基本的 Html 結(jié)構(gòu)

復(fù)制以下 HTML 結(jié)構(gòu)，然后將其粘貼到你的 HTML 文件中。在這種情況下，我沒有使用任何外部鏈接，例如 Jquery 或任何其他插件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body>
    
  <script>
 
  </script>
</body>
</html>

我使用 CSS 代碼設(shè)計了背景，并在背景中使用了黑色，可以非常清楚地看到數(shù)字時鐘。

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: hsl(113, 12%, 15%);
}

2.創(chuàng)建和設(shè)計時鐘背景

使用下面的 HTML 和 CSS 編程代碼，我創(chuàng)建了這個模擬時鐘結(jié)構(gòu)，這意味著下面的 HTML 和 CSS 編程代碼有助于使這款時鐘成為一個矩形形狀和背景中的數(shù)字。這款時鐘的寬度：350 像素，高度：350 像素。如果你想增加這只時鐘的尺寸，你可以增加或減少這個量。

正如我之前所說，在這種情況下，我在背景中使用了一個圖像來添加從 1 到 12 的數(shù)字，我使用背景 URL 添加了這些數(shù)字。你會看到，在這種情況下，我使用了一個盒子陰影，它使這個模擬時鐘更具吸引力。

<div class="Clock">
<!--Hands (hour,minute,second)-->
</div>

.Clock{
    width: 350px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sa5ueuzzu2l7j8iv7bk8.jpg);
    background-size: cover;
    border: 6px solid #3ac7e0;
    border-radius: 20px;
    box-shadow: 0 -15px  15px rgba(255,255,255,0.05),
                inset 0 -15px 15px rgba(255,255,255,0.05),
                0 15px 15px rgba(0,0,0,0.3),
                inset 0 15px 15px rgba(0,0,0,0.3);
}
.Clock:before{
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    z-index: 10000;
}

3.在模擬時鐘中制作指針

在這種情況下，我用了三只手?；旧显谌魏文M時鐘中，三針用于指示時間，以分鐘、小時和秒為單位。我使用下面的 HTML 和 CSS 編程代碼創(chuàng)建和設(shè)計了這些手。在這種情況下，我分別給出了時針、分針和秒針的顏色和大小。

<div class="hour"> 
            <div class="hr" id="hr"></div> 
        </div> 
        <div class="minute"> 
            <div class="min" id="min"> </div> 
        </div> 
        <div class="second"> 
            <div class="sec" id="sec"></div> 
        </div>

.Clock .hour,
.Clock .minute,
.Clock .second{
    position: absolute;
}
.Clock .hour, .hr{
    width: 160px;
    height: 160px;
}
.Clock .minute, .min{
    width: 190px;
    height: 190px;
}
.Clock .second, .sec{
    width: 230px;
    height: 230px;
}
.hr, .min, .sec{
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    position: absolute;
    border-radius: 50%;
   
}

4.按顏色設(shè)計時鐘中的每個指針

下面的代碼有助于更改此模擬手表中指針的顏色并確定這些指針的長度。如果查看下面的代碼，你將了解我為每個代碼使用了不同的高度。如果增加該高度的數(shù)量，那么手表中手的大小也會增加。

.hr:before{
    content: '';
    position: absolute;
    width: 8px;
    height: 80px;
    background: #ff10a3;
    z-index: 10;
    border-radius: 6px 6px 0 0;
}
.min:before{
    content: '';
    position: absolute;
    width: 4px;
    height: 90px;
    background: rgb(26, 219, 245);
    z-index: 11;
    border-radius: 6px 6px 0 0;
}
.sec:before{
    content: '';
    position: absolute;
    width: 2px;
    height: 150px;
    background: rgb(248, 233, 15);
    z-index: 12;
    border-radius: 6px 6px 0 0;
}

const deg = 6;
        const hr = document.querySelector('#hr');
        const min = document.querySelector('#min');
        const sec = document.querySelector('#sec');
        
        setInterval(() => {
   
   
        let day = new Date();
        let hh = day.getHours() * 30;
        let mm = day.getMinutes() * deg;
        let ss = day.getSeconds() * deg;
        
        hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
        min.style.transform = `rotateZ(${mm}deg)`;
        sec.style.transform = `rotateZ(${ss}deg)`;
        
        })

5.使用 JavaScript 代碼激活模擬時鐘

到目前為止，我們只使用 HTML 和 CSS 編程代碼設(shè)計了這款模擬時鐘?，F(xiàn)在我們將使用 JavaScript 編程代碼激活這個時鐘。下面我使用了非常少量的 JavaScript 編程代碼。首先，我標(biāo)記了分針秒針和小時針。然后我決定這些指針將如何旋轉(zhuǎn)，也就是說，它在模擬時鐘中旋轉(zhuǎn)的頻率。如果你了解基本的 JavaScript 編程代碼，你一定會理解下面的結(jié)構(gòu)。