JS时钟demo效果需求需求 1.对表盘刻度（其中需要注意的是关于其中会遇到许多定位与旋转问题）利用for循环引入

效果

需求

需求
1.对表盘刻度（其中需要注意的是关于其中会遇到许多定位与旋转问题）	利用for循环引入li来刻度因为用css一个一个设置li太繁琐了（旋转我们采用transform属性）
2.让表盘按照当前时间走起来	通过gethour等方法来获取实时时间，并利用定时器让它跑起来
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        /* 刻度时钟 */
        .time-clock{
            width: 300px;
            height: 300px;
            border: 5px solid rgb(15, 16, 14);
            border-radius: 50%;
            margin: 100px;
            position: relative;
            left: 560px;
        }
        /* 表盘 */
        .time-clock ul{
            width: 100%;
            height: 100%;
            position: relative;
        }
        .time-clock ul li{
            width: 2px;
            height: 8px;
            background: rgb(0, 0, 0);
            position: absolute;
            left: 50%;
            top:0;
            /* 基准点 */
            transform-origin:center 150px ;
        }
        /* 一个一个刻度太麻烦了，所以我们会利用js的循环来刻度 */
        /* .time-clock ul li:nth-child(2){
            transform: rotate(6deg);
            transform-origin:center 150px ;
        }
        .time-clock ul li:nth-child(3){
            transform: rotate(12deg);
            transform-origin:center 150px ;
        } */
        #hour {
            width: 6px;
            height: 50px;
            background: rgb(149, 149, 245);
            position: absolute;
            left: 50%;
            top: 50%;
            margin:-50px 0 0 -3px;
            /* 也需要基准点，使它以中间球为中心 */
            transform-origin:center bottom ;
        }
        #minu{
            width: 4px;
            height: 80px;
            background: rgb(164, 117, 209);
            position: absolute;
            left: 50%;
            top: 50%;
            margin:-80px 0 0 -2px;
            transform-origin:center bottom;
        }
        #second{
            width: 2px;
            height: 120px;
            background: rgb(243, 112, 112);
            position: absolute;
            left: 50%;
            top: 50%;
            margin:-120px 0 0 -1px;
            transform-origin:center bottom;
        }
    #ball{
        width: 20px;
        height: 20px;
        background: black;
        position: absolute;
        left: 50%;
        top:50%;
        border-radius: 50%;
        /* 是CSS中的一种居中方式，它可以将元素在其父元素中水平和垂直居中。其中-50%表示元素自身宽度或高度的一半，因此可以将元素的中心点与父元素的中心点对齐。具体来说，translate(-50%,-50%)的作用是将元素向左上方移动自身宽度或高度的一半，从而实现居中效果。 */
        transform:translate(-50%,-50%);
    }
/* —————————————————————————————————————————————— */
    /* 电子时钟 */
    #main{
        width: 700px;
        height: 200px;
        line-height: 300px;
        margin: 0 auto;
        /* margin: 50px 180px 0 180px; */
        text-align: center;
        line-height: 200px;
        background-color: rgb(235, 192, 192);
        border-radius: 70px;
        box-shadow: -10px -10px 20px rgba(255,255,255,.5),
        10px 10px 20px rgba(70,70,70,.12);
    }
    #clock{
        font-size: 60px;
        -webkit-text-stroke: 6px white;
        color: white; 
        letter-spacing: 25px;
    }
    </style>
</head>




<body>
    <!-- 刻度时钟 -->
    <!-- 表盘 -->
   <div class="time-clock">
    <!-- ul是刻度 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div id="hour"></div>
    <div id="minu"></div>
    <div id="second"></div>
    <div id="ball"></div>
</div>
    <!-- 电子时钟 -->
    <div id="main">
        <div id="clock">12:00:00</div>
    </div>
<!-- —————————————————————————————————— -->

    <script>
        //刻度时钟
        var ul =document.querySelector(`ul`);
        var hour =document.querySelector(`#hour`);
        var minu =document.querySelector(`#minu`);
        var second =document.querySelector(`#second`);
        //这里别忘加#，因为是id
//刻度————————————————————
//循环实现li创建也就是刻度的创建
        for(var i=0;i<60;i++){
            var li = document.createElement(`li`);
            li.style.transform = `rotate(`+i*6+`deg)`;
           //使刻度有长有短
            if(i%5==0){
                li.style.height=`18px`
            }
            //在ul中实现插入li
            ul.appendChild(li);
        }
//时针分针秒针
        //封装一个函数
        function run(){
            //找当前实时的时间
            var date = new Date();
            var iH = date.getHours();
            var iM = date.getMinutes();
            var iS = date.getSeconds();

            hour.style.transform = `rotate(`+(iH*30+iM/2)+`deg)`
            minu.style.transform = `rotate(`+iM*6+`deg)`
            second.style.transform = `rotate(`+iS*6+`deg)` 
        }
        run();
        //定时器（加定时器它才会走）
        setInterval(run,1000);



        //————————————————————————————————————
        //电子时钟
        //获取对象
        let oClock=document.querySelector(`#clock`);
        //写一个补位的方法（小于10就补0）
        let addZero = (num) =>{
            if(num>=10){
                return num;
            }else{
                return `0${num}`;
            }
        }
        let updateTime=()=>{
            //把日期对象实例化出来
            let now = new Date();
            //用日期对象中的gethour方法就可以获得当前是几点
            //然后时分秒拼接
            let time = addZero(now.getHours())+":"+
            addZero(now.getMinutes())+":"+
            addZero(now.getSeconds());
            oClock.innerText = time;
        }
        //因为你这个定时器设置的是隔一秒执行，所以你每次刷新的时候都会先回到最初你写的的12：00：00
        //所以我们在这里用定时器以前，先让这个函数执行一次，这样再刷新页面也是实时的了
        updateTime();
        setInterval(updateTime,1000);
    </script>

  
</body>
</html>