如何使用 HTML、CSS 和纯 JavaScript 制作模拟时钟

2025-06-07

如何使用 HTML、CSS 和纯 JavaScript 制作模拟时钟

HTML欢迎来到这个有趣的教程，学习如何使用、CSS和创建实时模拟时钟JavaScript。本教程的另一个亮点在于，我们不会使用任何库，而是使用纯 JavaScript 实现。在继续学习之前，您需要精通HTML、CSS和 JavaScript，这样才能理解我们一步步讲解的代码。完成本教程后，您将能够构建一个像这样
的出色模拟时钟。

让我们开始吧！

<!-- Html markup -->  
<!DOCTYPE html>  
<html>  
  <head>  
    <title>Analog Clock</title>  
  </head>  
  <body></body>  
</html>
Enter fullscreen mode Exit fullscreen mode

创建时钟数字

模拟时钟有 12 位数字，所以我们将创建一个 12 位数字<div>'s的时钟class="clock-number"，并<div>根据其 赋予每个数字一个类nth position。第一个数字<div>为class="clock-number num1"，第二个<div>数字为class="clock-number num2"，直到class="clock-number num12"。

<!DOCTYPE html>  
        <html>  
          <head>  
            <title>Analog Clock</title>  
          </head>  
          <body>  
            <div class="clock-container">  
              <div class="clock-number num1"></div>  
              <div class="clock-number num2"></div>  
              <div class="clock-number num3"></div>  
              <div class="clock-number num4"></div>  
              <div class="clock-number num5"></div>  
              <div class="clock-number num6"></div>  
              <div class="clock-number num7"></div>  
              <div class="clock-number num8"></div>  
              <div class="clock-number num9"></div>  
              <div class="clock-number num10"></div>  
              <div class="clock-number num11"></div>  
              <div class="clock-number num12"></div>  
            </div>  
          </body>  
        </html>
Enter fullscreen mode Exit fullscreen mode

插入时钟号码

<!DOCTYPE html>  
        <html>  
          <head>  
            <title>Analog Clock</title>  
          </head>  
          <body>  
            <div class="clock-container">  
              <div class="clock-number num1"><div class="">1</div></div>  
              <div class="clock-number num2"><div class="">2</div></div>  
              <div class="clock-number num3"><div class="">3</div></div>  
              <div class="clock-number num4"><div class="">4</div></div>  
              <div class="clock-number num5"><div class="">5</div></div>  
              <div class="clock-number num6"><div class="">6</div></div>  
              <div class="clock-number num7"><div class="">7</div></div>  
              <div class="clock-number num8"><div class="">8</div></div>  
              <div class="clock-number num9"><div class="">9</div></div>  
              <div class="clock-number num10"><div class="">10</div></div>  
              <div class="clock-number num11"><div class="">11</div></div>  
              <div class="clock-number num12"><div class="">12</div></div>  
            </div>  
          </body>  
        </html>
Enter fullscreen mode Exit fullscreen mode

插入其他重要元素

现在，我们将插入二读和日期等元素：

<!DOCTYPE html>  
        <html>  
          <head>  
            <title>Analog Clock</title>  
          </head>  
          <body>  
            <div class="clock-container">  
              <!-- Current day-->  
              <div class="days"></div>  
              <!-- Second reading-->  
              <div class="reading"></div>  
              <!-- Clock number-->  
              <div class="clock-number num1"><div class="">1</div></div>  
              <div class="clock-number num2"><div class="">2</div></div>  
              <div class="clock-number num3"><div class="">3</div></div>  
              <div class="clock-number num4"><div class="">4</div></div>  
              <div class="clock-number num5"><div class="">5</div></div>  
              <div class="clock-number num6"><div class="">6</div></div>  
              <div class="clock-number num7"><div class="">7</div></div>  
              <div class="clock-number num8"><div class="">8</div></div>  
              <div class="clock-number num9"><div class="">9</div></div>  
              <div class="clock-number num10"><div class="">10</div></div>  
              <div class="clock-number num11"><div class="">11</div></div>  
              <div class="clock-number num12"><div class="">12</div></div>  
            </div>  
          </body>  
        </html>
Enter fullscreen mode Exit fullscreen mode

时钟造型

CSS 插入到<style>头部部分。

body{  
            animation-name: clock-animation;  
            animation-iteration-count: infinite;  
            animation-duration: 6s;  
            width: 100vw;  
            height: 100vh;  
            display: flex;  
            justify-content: center;  
            align-items: center;  
            font-size: 20px;  
            overflow-x: hidden;  
            font-family: cursive;  

        }  

        @keyframes clock-animation{  
        0%{  
        background:#3e5afb;  


        }  
        50%{  
            background:#3e5;  

        }  

            100%{  
                background: yellow;  
            }  
        }  
        .clock-container{  
            width:350px;  
            height: 350px;  
            border: 6px solid purple;  
            border-radius: 50%;  
            position: relative;  
            background:#fff;  

        }  
        .clock-container::after{  
            content: "";  
            position: absolute;  
            width: 15px;  
            height: 15px;  
            background: purple;  
            left: 50%;  
            top: 50%;  
            transform: translate(-50%,-50%)  ;border-radius: 50%;  
        }  
        .clock-number{  
            position: absolute;  
            width: 100%;  
            height: 100%;  
            text-align: center;  
        }  
        .clock-number:after{  
            content:"";  
            position:absolute;  
            height:13px;  
            width:3px;  
            top:13%;  
            background:#000;  

        }  

        .clock-number> div{  
            padding: 12px;  
        }  
        .num1{  
            transform: rotate(30deg)  
        }  

        .num1 > div{  
            transform: rotate(-30deg)  
        }  
        .num2{  
            transform: rotate(60deg)  
        }  

        .num2 > div{  
            transform: rotate(-60deg)  
        }  
        .num3{  
            transform: rotate(90deg)  
        }  

        .num3 > div{  
            transform: rotate(-90deg)  
        }  
        .num4{  
            transform: rotate(120deg)  
        }  

        .num4 > div{  
            transform: rotate(-120deg)  
        }  
        .num5{  
            transform: rotate(150deg)  
        }  

        .num5 > div{  
            transform: rotate(-150deg)  
        }  
        .num6{  
            transform: rotate(180deg)  
        }  

        .num6 > div{  
            transform: rotate(-180deg)  
        }  
        .num7{  
            transform: rotate(210deg)  
        }  

        .num7 > div{  
            transform: rotate(-210deg)  
        }  
        .num8{  
            transform: rotate(240deg)  
        }  

        .num8 > div{  
            transform: rotate(-240deg)  
        }  
        .num9{  
            transform: rotate(270deg)  
        }  

        .num9 > div{  
            transform: rotate(-270deg)  
        }  
        .num10{  
            transform: rotate(300deg)  
        }  

        .num10 > div{  
            transform: rotate(-300deg)  
        }  
        .num11{  
            transform: rotate(330deg)  
        }  

        .num11 > div{  
            transform: rotate(-330deg)  
        }  

        .num12{  
            transform: rotate(360deg)  
        }  

        .num12 > div{  
            transform: rotate(-360deg)  
        }  

        .clock-hand{  
            width: 100%;  
            height: 100%;  
            position: absolute;  
        }  
        .clock-hand > div{  
            left: 50%;  
            bottom: 50%;  
            transform: translateX(-50%);  
            position: absolute;  
            border-radius:12px;  
        }  
        .second-hand{  
            height: 32%;  
            width: 1px;  
            background: purple;  
        }  
        .minute-hand{  
            height:30%;  
            width: 4px;  
            background: #000;  
        }  

        .hour-hand{  
            height: 20%;  
            width:8px;  
            background: #000;  
        }  
        .second-hand::after{  
            position: absolute;  
            content: "";  
            border-style: solid;  
            border-width: 4px;  
            border-color: transparent transparent purple transparent;  
            left: 50%;  
            transform: translateX(-50%);  
            top:-6%;  
        }  

        .current-day{  
            position:absolute;  
            font-size:12px;  
            font-weight:bold;  
            left:50%;  
            transform:translateX(-50%);  
            top:25%;  
        }  
        .current-seconds{  
            position:absolute;  
            font-size:12px;  
            font-weight:bold;  
            left:50%;  
            transform:translateX(-50%);  
            bottom:25%;  
            background:purple;  
            color:#fff;  
            padding:4px;  
        }
Enter fullscreen mode Exit fullscreen mode

现在我们已经完成了 HTML 部分，也完成了 HTML
文档的样式，让我们开始构建模拟时钟引擎。

JavaScript代码

建议您将script标签精确地放置在 的结束标签之前<body>。

此外，JavaScriptvar将在本课中let用于定义变量，如下所示：

let secondHand=document.querySelector("#sec");  
        let minHand=document.querySelector("#min")  
        let hourHand=document.querySelector("#hr")  


        setInterval(clockRotating,1000)  

        function clockRotating(){  
            var date=new Date();  
            var getSeconds=date.getSeconds()/60;  
            var getMinutes=date.getMinutes()/60;  
            var getHours=date.getHours()/12  

            secondHand.style.transform="rotate("+getSeconds*360 + "deg)"  
            minHand.style.transform="rotate("+getMinutes*360 + "deg)"  
            hourHand.style.transform="rotate("+getHours*360 + "deg)"  

            document.querySelector(".current-day").innerHTML=date.toDateString()  
            document.querySelector(".current-seconds").innerHTML=date.getSeconds()  

        }
Enter fullscreen mode Exit fullscreen mode

好了，你应该有一个用 JavaScript 制作的可以运行的模拟时钟了。

完整代码

如果你迷路了，完整的代码如下

<!DOCTYPE html>  
        <html lang="en">  
        <head>  
           <style>  

        body{  
            animation-name: clock-animation;  
            animation-iteration-count: infinite;  
            animation-duration: 6s;  
            width: 100vw;  
            height: 100vh;  
            display: flex;  
            justify-content: center;  
            align-items: center;  
            font-size: 20px;  
            overflow-x: hidden;  
            font-family: cursive;  

        }  

        @keyframes clock-animation{  
        0%{  
        background:#3e5afb;  


        }  
        50%{  
            background:#3e5;  

        }  

            100%{  
                background: yellow;  
            }  
        }  
        .clock-container{  
            width:350px;  
            height: 350px;  
            border: 6px solid purple;  
            border-radius: 50%;  
            position: relative;  
            background:#fff;  

        }  
        .clock-container::after{  
            content: "";  
            position: absolute;  
            width: 15px;  
            height: 15px;  
            background: purple;  
            left: 50%;  
            top: 50%;  
            transform: translate(-50%,-50%)  ;border-radius: 50%;  
        }  
        .clock-number{  
            position: absolute;  
            width: 100%;  
            height: 100%;  
            text-align: center;  
        }  
        .clock-number:after{  
            content:"";  
            position:absolute;  
            height:13px;  
            width:3px;  
            top:13%;  
            background:#000;  

        }  

        .clock-number> div{  
            padding: 12px;  
        }  
        .num1{  
            transform: rotate(30deg)  
        }  

        .num1 > div{  
            transform: rotate(-30deg)  
        }  
        .num2{  
            transform: rotate(60deg)  
        }  

        .num2 > div{  
            transform: rotate(-60deg)  
        }  
        .num3{  
            transform: rotate(90deg)  
        }  

        .num3 > div{  
            transform: rotate(-90deg)  
        }  
        .num4{  
            transform: rotate(120deg)  
        }  

        .num4 > div{  
            transform: rotate(-120deg)  
        }  
        .num5{  
            transform: rotate(150deg)  
        }  

        .num5 > div{  
            transform: rotate(-150deg)  
        }  
        .num6{  
            transform: rotate(180deg)  
        }  

        .num6 > div{  
            transform: rotate(-180deg)  
        }  
        .num7{  
            transform: rotate(210deg)  
        }  

        .num7 > div{  
            transform: rotate(-210deg)  
        }  
        .num8{  
            transform: rotate(240deg)  
        }  

        .num8 > div{  
            transform: rotate(-240deg)  
        }  
        .num9{  
            transform: rotate(270deg)  
        }  

        .num9 > div{  
            transform: rotate(-270deg)  
        }  
        .num10{  
            transform: rotate(300deg)  
        }  

        .num10 > div{  
            transform: rotate(-300deg)  
        }  
        .num11{  
            transform: rotate(330deg)  
        }  

        .num11 > div{  
            transform: rotate(-330deg)  
        }  

        .num12{  
            transform: rotate(360deg)  
        }  

        .num12 > div{  
            transform: rotate(-360deg)  
        }  

        .clock-hand{  
            width: 100%;  
            height: 100%;  
            position: absolute;  
        }  
        .clock-hand > div{  
            left: 50%;  
            bottom: 50%;  
            transform: translateX(-50%);  
            position: absolute;  
            border-radius:12px;  
        }  
        .second-hand{  
            height: 32%;  
            width: 1px;  
            background: purple;  
        }  
        .minute-hand{  
            height:30%;  
            width: 4px;  
            background: #000;  
        }  

        .hour-hand{  
            height: 20%;  
            width:8px;  
            background: #000;  
        }  
        .second-hand::after{  
            position: absolute;  
            content: "";  
            border-style: solid;  
            border-width: 4px;  
            border-color: transparent transparent purple transparent;  
            left: 50%;  
            transform: translateX(-50%);  
            top:-6%;  
        }  

        .current-day{  
            position:absolute;  
            font-size:12px;  
            font-weight:bold;  
            left:50%;  
            transform:translateX(-50%);  
            top:25%;  
        }  
        .current-seconds{  
            position:absolute;  
            font-size:12px;  
            font-weight:bold;  
            left:50%;  
            transform:translateX(-50%);  
            bottom:25%;  
            background:purple;  
            color:#fff;  
            padding:4px;}  
           </style>  
        </head>  
        <body>  
            <div class="clock-container">  
                <div class="current-day">  

                </div>  
                 <div class="current-seconds">  

                </div>  
                <div class="current-seconds"></div>  
                <div class="clock-number num1">  
                    <div>1</div>  
                </div>  
                <div class="clock-number num2">  
                        <div>2</div>  
                    </div>  
                <div class="clock-number num3">  
                    <div>3</div>  
                 </div>  
                 <div class="clock-number num4">  
                     <div>4</div>  
                    </div>  
                 <div class="clock-number num5">  
                    <div>5</div>  
                     </div>  
                     <div class="clock-number num6">  
                       <div>6</div>  
                    </div>  
                    <div class="clock-number num7">  
                  <div>7</div>  
                    </div>  
                  <div class="clock-number num8">  
                     <div>8</div>  
                    </div>  
                    <div class="clock-number num9">  
                      <div>9</div>  
                      </div>  
                     <div class="clock-number num10">  
                       <div>10</div>  
                         </div>  
                      <div class="clock-number num11">  
                     <div>11</div>  
                      </div>  
                      <div class="clock-number num12">  
                   <div>12</div>  
                    </div>  
                     <div class="clock-hand" id="sec">  
                  <div class="second-hand"></div>  
                 </div>  
                <div class="clock-hand" id="min">  
                 <div class="minute-hand"></div>  
                 </div>  
               <div class="clock-hand" id="hr">  
                 <div class="hour-hand"></div>  
                </div>  
            </div>  

            <script>  

            let secondHand=document.querySelector("#sec");  
        let minHand=document.querySelector("#min")  
        let hourHand=document.querySelector("#hr")  


        setInterval(clockRotating,1000)  

        function clockRotating(){  
            var date=new Date();  
            var getSeconds=date.getSeconds()/60;  
            var getMinutes=date.getMinutes()/60;  
            var getHours=date.getHours()/12  

            secondHand.style.transform="rotate("+getSeconds*360 + "deg)"  
            minHand.style.transform="rotate("+getMinutes*360 + "deg)"  
            hourHand.style.transform="rotate("+getHours*360 + "deg)"  

            document.querySelector(".current-day").innerHTML=date.toDateString()  
            document.querySelector(".current-seconds").innerHTML=date.getSeconds()  

        }      
            </script>  
        </body>  
        </html>
Enter fullscreen mode Exit fullscreen mode

希望你从这节课中有所收获？请在下方评论区留言告诉我吧！

文章来源：https://dev.to/eris202/how-to-make-an-analog-clock-with-html-css-and-pure-javascript-4ap9
Devto 翻译
PREV
天气应用：使用 Vue 和 Axios
NEXT
设置 Ubuntu 22.04 工作站用于软件开发和内容创建