刻度+时钟

刻度表div部分

<div class="dial">
        <ul>
            <div class=""></div>
            <div class="minute"></div>
            <div class="hour"></div>
            <div class="second"></div>
            <div class="center"></div>

        </ul>
    </div>

刻度表css部分

把li留着，在js里做，style部分先写出来。
时分秒针运用旋转知识

.dial{
    border: 1px solid black;
    border-radius: 100%;
    height: 200px;
    width: 200px;
    margin: 0 auto;
    position: relative;
}
.hour{
    width: 3px;
    background-color: black;
    height: 30px;
    position: absolute;
    transform: rotateZ('angle');
    margin: 70px 0px 0px 100px;
    transform: rotateZ(0deg);
    transform-origin: center bottom;
}
.minute{
    width: 2px;
    background-color: black;
    height: 60px;
    position: absolute;
    transform: rotateZ('angle');
    margin: 40px 0px 0px 100px;
    transform: rotateZ(0deg);
    transform-origin: center bottom;
}
.second{
    width: 0.5px;
    background-color: black;
    height: 70px;
    position: absolute;
    transform: rotateZ('angle');
    margin: 30px 0px 0px 100px;
    transform: rotateZ(0deg);
    transform-origin: center bottom;
}
.dial ul {
    position: relative;
    list-style-type: none;
}
.dial ul li{
    position: absolute;
    width: 0.5px;
    height: 10px;
    background-color: black; 
    left: 50%; 
    transform-origin: center 100px;  
}

刻度表js部分

时间和角度代换要动脑子

var hour = document.querySelector(".hour");
var minute = document.querySelector(".minute");
var second = document.querySelector(".second");
var ul = document.querySelector("ul");



for (var i = 1; i <= 60; i++) {

    var li = document.createElement("li");

    li.style.transform = "rotate(" + i * 6 + "deg)";

    if (i % 5 == 0) {
        li.style.height = "15px";
    }

    ul.appendChild(li);

}

function run() {
    var date = new Date;
    var h = date.getHours();
    var m = date.getMinutes();
    var s = date.getSeconds();
    hour.style.transform = "rotate(" + (h * 30 + m / 2) + "deg)";
    minute.style.transform = "rotate(" + m * 6 + "deg)";
    second.style.transform = "rotate(" + s * 6 + "deg)";
}
run()

setInterval(run, 1000)

时钟div部分

<div class="time">
        <div class="hour1"></div>
        <div>:</div>
        <div class="minute1"></div>
        <div>:</div>
        <div class="second1"></div>
    </div>

时钟css部分

.time{
    height: 150px;
    width: 100px;
    color: black;
    font-size: 30px;
    display: flex;
    margin: 0 auto;
}

时钟js部分

var hour1 = document.querySelector(".hour1");
var minute1 = document.querySelector(".minute1");
var second1 = document.querySelector(".second1");


function time2(){
var date = new Date;
var h1 = date.getHours();
var m1 = date.getMinutes();
var s1 = date.getSeconds();


if(h1<10){
    h1="0"+h1;
}
if(m1<10){
    m1="0"+h1;
}
if(s1<10){
    s1="0"+h1;
}

hour1.innerHTML=h1;
minute1.innerHTML=m1;
second1.innerHTML=s1;
}
time2()
setInterval(time2, 1000)