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

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

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

項(xiàng)目基本結(jié)構(gòu)
1.創(chuàng)建一個(gè)基本的 Html 結(jié)構(gòu)
2.創(chuàng)建和設(shè)計(jì)時(shí)鐘背景
3.在模擬時(shí)鐘中制作指針
4.按顏色設(shè)計(jì)時(shí)鐘中的每個(gè)指針
5.使用 JavaScript 代碼激活模擬時(shí)鐘
完整源碼下載

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

在線演示地址

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

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

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

1.創(chuàng)建一個(gè)基本的 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è)計(jì)了背景，并在背景中使用了黑色，可以非常清楚地看到數(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è)計(jì)時(shí)鐘背景

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

正如我之前所說，在這種情況下，我在背景中使用了一個(gè)圖像來添加從 1 到 12 的數(shù)字，我使用背景 URL 添加了這些數(shù)字。你會(huì)看到，在這種情況下，我使用了一個(gè)盒子陰影，它使這個(gè)模擬時(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.在模擬時(shí)鐘中制作指針

在這種情況下，我用了三只手?；旧显谌魏文M時(shí)鐘中，三針用于指示時(shí)間，以分鐘、小時(shí)和秒為單位。我使用下面的 HTML 和 CSS 編程代碼創(chuàng)建和設(shè)計(jì)了這些手。在這種情況下，我分別給出了時(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è)計(jì)時(shí)鐘中的每個(gè)指針

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

.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 代碼激活模擬時(shí)鐘

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

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

完整源碼下載

GitHub 地址

到此這篇關(guān)于HTML+JavaScript模擬實(shí)現(xiàn)簡(jiǎn)單的時(shí)鐘效果的文章就介紹到這了,更多相關(guān)JavaScript時(shí)鐘內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: