扩展：使用js和css写了一个时钟_span.style.transform-CSDN博客

本文链接：https://blog.csdn.net/weixin_44651559/article/details/117043754
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: rgb(0, 0, 0);
        }

        .clockbox {
            width: 750px;
            height: 750px;
            border-radius: 100%;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* background-color: yellowgreen; */
            border: outset;
            border-width: 30px;
            border-color: slategray;
            background-image: url('./haizeiwang.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }

        .bgimg {
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: 100%;
            background: rgb(255, 255, 255, 0.2)
        }

        .timebox {
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: 100%;
            /* background-color: yellowgreen; */
            /* background:rgb(255,255,255,0.05) */
        }

        div {
            transition: all 0.7s;
        }

        /* #second{
            background-color: red;
            z-index: 10;
        } */

        span {
            float: left;
            display: block;
            transition: all 0.5s;
            text-align: right;
            font-weight: 600;
            /* z-index: 10; */
            /* border-right:1px solid red; */
        }

        .timebox span {
            width: 50px;
            height: 30px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -15px;
            margin-left: -25px;
            /* transform: rotate(90deg); */
            /* background-color: violet; */
        }

        .years {
            text-align: center;
            font-size: 30px;
            font-weight: 700;
            transform: translate(-2px, -15px);
        }

        .now {
            color: white;
            font-weight: bolder;
            background-color: rgb(0, 0, 0, 0.6)
        }
    </style>
</head>

<body>
    <div class="clockbox">
        <div class="bgimg">
            <div class="timebox" id="second"></div>
            <div class="timebox" id="minth"></div>
            <div class="timebox" id="hour"></div>
            <div class="timebox" id="days"></div>
            <div class="timebox" id="month"></div>
            <div class="timebox" id="year"></div>
        </div>
    </div>
    <script>

        (function () {
            var now_date = new Date();
            var second = document.getElementById('second');
            var minths = document.getElementById('minth');
            var hours = document.getElementById('hour');
            var days = document.getElementById('days');
            var months = document.getElementById('month');
            var years = document.getElementById('year');
            let now_year = now_date.getFullYear();
            let pd = now_year % 4 == 0 && now_year % 100 != 0 || now_year % 400 == 0 ? true : false;//闰年
            let now_days = 0;
            var get_now_days = () => {
                let now_month = now_date.getMonth() + 1;
                if (now_month in [1, 3, 5, 7, 8, 10, 12]) {
                    now_days = 31;
                    // initdays(31);
                } else if (now_month in [4, 6, 9, 11]) {
                    // initdays(30);
                    now_days = 30;
                } else if (pd) {
                    // initdays(29);
                    now_days = 29;
                } else {
                    // initdays(28);
                    now_days = 28;
                }
            }
            var initseconds = function () {
                for (i = 0; i < 60; i++) {
                    let mioa = i;
                    let span = document.createElement('span');
                    span.style.transform = `rotate(${6 * i}deg) translateX(300px)`;
                    if (i < 10) {
                        mioa = '0' + i;
                    }
                    span.innerHTML = mioa + '秒';
                    second.appendChild(span);
                }
            }
            var initminths = function () {
                for (i = 0; i < 60; i++) {
                    let minth = i;
                    let span = document.createElement('span');
                    span.style.transform = `rotate(${6 * i}deg) translateX(250px)`;
                    if (i < 10) {
                        minth = '0' + i;
                    }
                    span.innerHTML = minth + '分';
                    minths.appendChild(span)
                }
            }
            var inithours = function () {
                for (i = 0; i < 24; i++) {
                    let hour = i;
                    let span = document.createElement('span');
                    span.style.transform = `rotate(${(360 / 24) * i}deg) translateX(200px)`;
                    if (i < 10) {
                        hour = '0' + i;
                    }
                    span.innerHTML = hour + '时';
                    hours.appendChild(span)
                }
            }
            var initdays = function (daysnum) {
                for (i = 0; i < daysnum; i++) {
                    let day = i + 1;
                    let span = document.createElement('span');
                    span.style.transform = `rotate(${(360 / daysnum) * i}deg) translateX(150px)`;
                    if (day < 10) {
                        day = '0' + day;
                    }
                    span.innerHTML = day + '日';
                    days.appendChild(span)
                }
            }
            var initmonths = function () {
                for (i = 0; i < 12; i++) {
                    let month = i + 1;
                    if (i < 10) {
                        month = '0' + i;
                    }
                    let span = document.createElement('span');
                    span.style.transform = `rotate(${(360 / 12) * i}deg) translateX(100px)`;
                    span.innerHTML = month + '月';
                    months.appendChild(span)
                }
            }
            var inityears = function (nums) {
                let span = document.createElement('span');
                span.className = 'years';
                span.innerHTML = nums + '年';
                years.appendChild(span);
            }
            var nowtime = (tags) => {
                tags.className = 'now';
                let parents = tags.parentNode;
                let childs = parents.children;
                for (i of childs) {
                    if (tags !== i) {
                        i.className = '';
                    }
                }
            }
            var getnow = (dates) => {
                nowtime(second.children[dates.getSeconds()]);
                nowtime(minths.children[dates.getMinutes()]);
                nowtime(hours.children[dates.getHours()]);
                nowtime(days.children[dates.getDate() - 1]);
                nowtime(months.children[dates.getMonth()]);
                // years.children[0].className='now';                
            }

            var initclocks = () => {
                initdays(now_days);
                inityears(2021);
                initseconds();
                initminths();
                inithours();
                initmonths();

                second.style.transform = `rotate(${-(360 / 60) * now_date.getSeconds()}deg)`;
                minths.style.transform = `rotate(${-(360 / 60) * now_date.getMinutes()}deg)`;
                hours.style.transform = `rotate(${-(360 / 24) * now_date.getHours()}deg)`;
                days.style.transform = `rotate(${-(360 / now_days) * (now_date.getDate() - 1)}deg)`;
                months.style.transform = `rotate(${-(360 / 12) * now_date.getMonth()}deg)`;
            }

            get_now_days();


            function main() {
                let $second = 6 * now_date.getSeconds();
                let $minths = 6 * now_date.getMinutes();
                let $hours = (360 / 24) * now_date.getHours();
                let $days = (360 / now_days) * (now_date.getDate() - 1);
                let $months = (360 / 12) * now_date.getMonth();
                initclocks();
                
                setInterval(function () {
                    var now_date = new Date();
                    $second+=6;
                    if($second%360==0){
                        $minths+=6;
                    }else if($minths%360==0){
                        $hours+=(360/24);
                    }else if($hours%360==0){
                        $days+=(360/now_days);
                    }else if($days%360==0){
                        $months+=(360/12);
                    }else if($months%360==0){
                        years.children[0].innerHTML = now_date.getFullYear() + '年';
                    }
                    second.style.transform = `rotate(${-$second}deg)`;
                    minths.style.transform = `rotate(${-$minths}deg)`;
                    hours.style.transform = `rotate(${-$hours}deg)`;
                    days.style.transform = `rotate(${-$days}deg)`;
                    months.style.transform = `rotate(${-$months}deg)`;
                    years.children[0].innerHTML = now_date.getFullYear() + '年';
                    getnow(now_date);
                }, 1000)
            }

            main();

        })();


    </script>
</body>

</html>