使用HTML JS CSS完成一个动态钟表（详解）

先上效果

当打开页面的时候会获取当前的时分秒来使各个指针到达指定的位置，再设置高刷新时间来使钟表实现动态的效果，当然也可以使用动画来完成动态的效果，但是设置刷新时间是最简单的方法

这是主体HTML代码

<div class="a">

        <!--这是刻度线-->
        <li></li>
        <li><p>1</p></li>
        <li><p>2</p></li>
        <li><p>3</p></li>
        <li><p>4</p></li>
        <li><p>5</p></li>
        <li><p>6</p></li>
        <li><p>7</p></li>
        <li><p>8</p></li>
        <li><p>9</p></li>
        <li><p>10</p></li>
        <li><p>11</p></li>
        <li><p>12</p></li>

        <!-- 这是时针 -->
        <div class="s"></div>

        <!-- 这是分针 -->
        <div class="f"></div>

        <!-- 这是秒针 -->
        <div class="m"></div>

        <!-- 这是中心圆，用于挡住指针的“脚” -->
        <div class="zx"></div>
    </div>

至于为什么会多一个 li ，这是因为之后需要用到 nth-child 选择器，而这个选择器是从1开始选择的如果只有12个 li 那么最终只能选到11个，而且第一个很容易选不到，所有会多写一个 li 在最起那么

---

下面是css代码

			            /* 这里用于设置表盘的样式 */
            .a{
                width: 500px;
                height: 500px;
                border: 1px solid black;
                background-color: white;
                border-radius: 50%;
                position: relative;
            }
            
            /* 这里用于设置每个li的样式 */
            li{
                width: 20px;
                height: 500px;
                list-style: none;
                position: absolute;
                left: 47%;
                text-align: center;
            }

            /* 设置时针的样式 */
            .s{
                width: 10px;
                height: 120px;
                background-color: black;
                position: absolute;
                top: 130px;
                left: 240px;
            }

            /* 设置分针的样式 */
            .f{
                width: 8px;
                height: 130px;
                background-color: red;
                position: absolute;
                top: 120px;
                left: 241px;
            }

            /* 设置秒针的样式 */
            .m{
                width: 6px;
                height: 140px;
                background-color: orange;
                position: absolute;
                top: 110px;
                left: 242px;
            }

            /* 设置中间黑圆的样式 */
            .zx{
                width: 20px;
                height: 20px;
                background-color: black;
                border-radius: 50%;
                position: absolute;
                top: 240px;
                left: 235px;
            }

            /* 设置时针，分针，和秒针的旋转中心位置 */
            .s{
               transform-origin: bottom center;
            }
            .f{
                transform-origin: bottom center;
            }
            .m{
                transform-origin: bottom center;
            }

            /* 用于找到每一个li并设置样式*/
            li:nth-child(2){
                color: red;
                transform: rotate(30deg);
            }
            li:nth-child(3){
                color: red;
                transform: rotate(60deg);
            }
            li:nth-child(4){
                color: red;
                transform: rotate(90deg);
            }
            li:nth-child(5){
                color: red;
                transform: rotate(120deg);
            }
            li:nth-child(6){
                color: red;
                transform: rotate(150deg);
            }
            li:nth-child(7){
                color: red;
                transform: rotate(180deg);
            }
            li:nth-child(8){
                color: red;
                transform: rotate(210deg);
            }
            li:nth-child(9){
                color: red;
                transform: rotate(240deg);
            }
            li:nth-child(10){
                color: red;
                transform: rotate(270deg);
            }
            li:nth-child(11){
                color: red;
                transform: rotate(300deg);
            }
            li:nth-child(12){
                color: red;
                transform: rotate(330deg);
            }
            li:nth-child(13){
                color: red;
                transform: rotate(360deg);
            }

            /* 用于找到每一个 li 下的 p 即每一个数字 */
            li:nth-child(2) p{
                transform: rotate(-30deg);
            }
            li:nth-child(3) p{
                transform: rotate(-60deg);
            }
            li:nth-child(4) p{
                transform: rotate(-90deg);
            }
            li:nth-child(5) p{
                transform: rotate(-120deg);
            }
            li:nth-child(6) p{
                transform: rotate(-150deg);
            }
            li:nth-child(7) p{
                transform: rotate(-180deg);
            }
            li:nth-child(8) p{
                transform: rotate(-210deg);
            }
            li:nth-child(9) p{
                transform: rotate(-240deg);
            }
            li:nth-child(10) p{
                transform: rotate(-270deg);
            }
            li:nth-child(11) p{
                transform: rotate(-300deg);
            }
            li:nth-child(12) p{
                transform: rotate(-330deg);
            }
            li:nth-child(13) p{
                transform: rotate(-360deg);
            }

css样式没啥好说的，主要需要注意的是 nth-child 选择器的用法

下面是完整js代码，想让钟表指针动起来那么就需要js代码了

		var s=document.querySelector(".s");
        var f=document.querySelector(".f");
        var m=document.querySelector(".m");

        setInterval(function(){
            var time=new Date();
            var ss,ff,mm;
            hm=time.getMilliseconds();
            mm=time.getSeconds();
            ff=time.getMinutes();
            ss=time.getHours()+ff/60;
            s.style.transform="rotate("+ss*30+"deg)";
            f.style.transform="rotate("+ff*6+"deg)";
            m.style.transform="rotate("+0.006*(mm*1000+hm)+"deg)";
        },10);

下面将代码分解讲述

		var s=document.querySelector(".s");
        var f=document.querySelector(".f");
        var m=document.querySelector(".m");

这一部分用于找到并获得每个指针

        setInterval(function(){
            var time=new Date();
            var ss,ff,mm;
            hm=time.getMilliseconds();
            mm=time.getSeconds();
            ff=time.getMinutes();
            ss=time.getHours()+ff/60;
            s.style.transform="rotate("+ss*30+"deg)";
            f.style.transform="rotate("+ff*6+"deg)";
            m.style.transform="rotate("+0.006*(mm*1000+hm)+"deg)";
        },10);

这是一个方法，方法里面2~7行用于获得当前的时间，并将他们取出来赋值
至于时针赋值的时候后面为什么要加 ff/60 是因为当时间为1:30分的时候时针肯定是在1到2之间而不是指向1
其实分针也是可以设置只是数值不一样，因为分针不容易看出来所有没有设置而时针不设置的话漏洞太明显了

8~10行作用是用于让指针根据当前的时间指向各自的位置
而第十一行的作用是设置刷新时间，单位是毫秒，所以设置的值越低刷新速度越快，看起来越流畅，用于代替动画效果