HTML+JavaScript模擬實現簡單的時鐘效果

Posted on by

在本文中，我將向大傢展示如何使用 HTML、CSS 和 JavaScript 代碼制作模擬時鐘。

在線演示地址

項目基本結構

目錄結構如下：

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

1.創建一個基本的 Html 結構

復制以下 HTML 結構，然後將其粘貼到你的 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 代碼設計瞭背景，並在背景中使用瞭黑色，可以非常清楚地看到數字時鐘。

*
{
    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.創建和設計時鐘背景

使用下面的 HTML 和 CSS 編程代碼，我創建瞭這個模擬時鐘結構，這意味著下面的 HTML 和 CSS 編程代碼有助於使這款時鐘成為一個矩形形狀和背景中的數字。這款時鐘的寬度：350 像素，高度：350 像素。如果你想增加這隻時鐘的尺寸，你可以增加或減少這個量。

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

<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.在模擬時鐘中制作指針

在這種情況下，我用瞭三隻手。基本上在任何模擬時鐘中，三針用於指示時間，以分鐘、小時和秒為單位。我使用下面的 HTML 和 CSS 編程代碼創建和設計瞭這些手。在這種情況下，我分別給出瞭時針、分針和秒針的顏色和大小。

<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.按顏色設計時鐘中的每個指針

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

.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 編程代碼設計瞭這款模擬時鐘。現在我們將使用 JavaScript 編程代碼激活這個時鐘。 下面我使用瞭非常少量的 JavaScript 編程代碼。首先，我標記瞭分針秒針和小時針。然後我決定這些指針將如何旋轉，也就是說，它在模擬時鐘中旋轉的頻率。如果你瞭解基本的 JavaScript 編程代碼，你一定會理解下面的結構。

希望你從本教程中瞭解到我是如何使用 HTML CSS 和 JavaScript 編程代碼制作這個模擬時鐘的。

完整源碼下載

GitHub 地址

到此這篇關於HTML+JavaScript模擬實現簡單的時鐘效果的文章就介紹到這瞭,更多相關JavaScript時鐘內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：