JS实现简易时钟

需求：

上方是简易的刻度时钟，下方是电子时钟，上下的时间需与北京时间实时对应。

原理：

上面的时钟，利用循环创建60个li标签，分别利用不同的偏转来实现在不同的位置上，再创建三个li标签设置宽度和高度来充当指针，将指针放入定时器中，每隔一秒转移一步

下面的时钟直接获得现在的时间就可以完成

效果图：

时钟

代码块：

window.onload=function(){
    var ul = document.querySelector("ul")
    for(let i=0;i<60;i++) {
        var li = document.createElement("li")
        ul.appendChild(li)
        li.style.transform='rotate('+(i)*6+'deg)'
        if (i%5==0) {
            li.style.height=18+"px"
        }
    }
    var hour=document.querySelector(".hour")
    var minu=document.querySelector(".minu")
    var second=document.querySelector(".second")
    var timer1 = setInterval(function(){
        var date = new Date()
        var newHour = date.getHours()
        var newMinu = date.getMinutes()
        var newSecond = date.getSeconds()
        hour.style.transform = 'rotate('+(newHour)*30+'deg)'
        minu.style.transform = 'rotate('+(newMinu)*6+'deg)'
        second.style.transform = 'rotate('+(newSecond)*6+'deg)'
    },1000)

    var now = {}
    var box = document.querySelector(".box")
    var box1 = document.querySelector(".hourbox")
    var box2 = document.querySelector(".minubox")
    var box3 = document.querySelector(".secondsbox")
    setInterval(function(){
        var date = new Date()//这个now是定义在回调函数内部，作用域只有回调函数内
        var nhour = date.getHours()
        var nminu = date.getMinutes()
        var nsecond = date.getSeconds()
        box1.innerHTML=`${nhour}时`
        box2.innerHTML=`${nminu}分`
        box3.innerHTML=`${nsecond}秒`
    },1000)
}