html、css、js刻度时钟

在网上看了一些刻度时钟的源码 发现都是有问题的 这里发一份亲测可用的源码

 

 

 

html代码

<div class="clock">
        <span class="ntop">12</span>
        <span class="nright">3</span>
        <span class="nbottom">6</span>
        <span class="nleft">9</span>
        <ul class="list"></ul>
        <!-- 时针 -->
        <div class="hour">
            <div class="hr"></div>
        </div>
        <!-- 分针 -->
        <div class="min">
            <div class="mn"></div>
        </div>
        <!-- 秒针 -->
        <div class="sec">
            <div class="sc"></div>
        </div>
    </div>

 

css部分

* {
            margin: 0;
            padding: 0;
            font-family: '微软雅黑', sans-serif;
            list-style: none;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #000000;
        }

        .clock {
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            position: relative;
        }

        .list {
            width: 350px;
            height: 350px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            border: 3px solid #091921;
            box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
                inset 0 -15px 15px rgba(255, 255, 255, 0.05),
                0 15px 15px rgba(0, 0, 0, 0.05),
                inset 0 15px 15px rgba(0, 0, 0, 0.05);
        }

        .clock::before {
            content: "";
            position: absolute;
            width: 15px;
            height: 15px;
            background: #fff;
            border-radius: 50%;
            z-index: 999;
            box-shadow: 0 0 10px #FFFFFF;
        }

        .clock .hour,
        .clock .min,
        .clock .sec {
            position: absolute;
        }

        .clock .hour,
        .hr {
            width: 160px;
            height: 160px;
        }

        .clock .min,
        .mn {
            width: 190px;
            height: 190px;
        }

        .clock .sec,
        .sc {
            width: 230px;
            height: 230px;
        }

        .hr,
        .mn,
        .sc {
            display: flex;
            justify-content: center;
            position: absolute;
            border-radius: 50%;
        }

        .hr::before {
            content: '';
            position: absolute;
            width: 8px;
            height: 80px;
            background: red;
            z-index: 10;
            border-radius: 6px 6px 0 0;
        }

        .mn::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 90px;
            background: #FFFFFF;
            z-index: 11;
            border-radius: 6px 6px 0 0;
        }

        .sc::before {
            content: '';
            position: absolute;
            width: 2px;
            height: 150px;
            background: #FFFFFF;
            z-index: 12;
            border-radius: 6px 6px 0 0;
        }

        .list {
            position: relative;
        }

        .list li {
            position: absolute;
            top: 0;
            width: 2px;
            height: 10px;
            z-index: 15;
            background: #256f94;
            transform-origin: center 175px;
        }

        .list li:nth-of-type(5n + 1) {
            width: 3px;
            height: 16px;
        }

        .list li:nth-of-type(1) {
            width: 3px;
            height: 26px;
            background: #FFFFFF;
        }

        .list li:nth-of-type(16) {
            width: 3px;
            height: 26px;
            background: #FFFFFF;
        }

        .list li:nth-of-type(31) {
            width: 3px;
            height: 26px;
            background: #FFFFFF;
        }

        .list li:nth-of-type(46) {
            width: 3px;
            height: 26px;
            background: #FFFFFF;
        }

        .ntop,
        .nright,
        .nbottom,
        .nleft {
            position: absolute;
            color: #FFFFFF;
        }

        .ntop {
            top: 34px;
        }

        .nright {
            right: 34px;
        }

        .nbottom {
            bottom: 34px;
        }

        .nleft {
            left: 34px;
        }

 

js部分

<script type="text/javascript">
        let clock = document.querySelector('.clock')
        let list = document.querySelector('.list')
        for (let i = 0; i < 60; i++) {
            let aLi = document.createElement('li')
            aLi.style.webkitTransform = 'rotate(' + i * 6 + 'deg)'
            list.appendChild(aLi)
        }
        const hr = document.querySelector(".hr")
        const mn = document.querySelector(".mn")
        const sc = document.querySelector(".sc")
        setInterval(() => {
            let date = new Date()
            let hh = date.getHours() * 30 //一圈360度，有12个格子，每格360/12=30
            let mm = date.getMinutes() * 6 //一圈360度 有60格 每格6度
            let ss = date.getSeconds() * 6 //一圈360度 有60格 每格6度
            hr.style.transform = `rotateZ(${(hh) + (mm / 12)}deg)`//时的刻度等于时针走过的刻度数加上分针的偏移量
            mn.style.transform = `rotate(${mm}deg)`
            sc.style.transform = `rotate(${ss}deg)`
        })
    </script>