JavaScript模拟时钟指针无法转动问题排查求助

你的时钟指针无法转动，核心问题出在两个关键细节上：

1. setRotation 函数未正确生成有效的旋转角度 #

你当前的代码中，setRotation 传递给CSS变量--rotation的是字符串'rotationRation * 360'，这不是可计算的数值，也缺少角度单位deg，导致CSS无法识别有效的旋转指令。

修复后的函数：

function setRotation(element, rotationRatio){
    element.style.setProperty('--rotation', `${rotationRatio * 360}deg`); 
}

这里用模板字符串计算出实际旋转角度（比例×360），并添加deg单位，确保CSS能正确解析。

2. CSS旋转规则可简化（配合JS修复） #

原CSS中.hand的rotate(calc(var(--rotation)))可以简化为rotate(var(--rotation))，因为JS已经传入带deg单位的完整角度值，无需额外计算。

修改后的.hand CSS规则：

.clock .hand{
    --rotation: 0;
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 10px;
    height: 40%;
    background: black;
    border: 1px solid white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transform: translateX(-50%) rotate(var(--rotation));
    transform-origin: bottom;
    z-index: 10;
}

完整修复代码 #

JavaScript #

setInterval(setClock, 1000);

const hourHand = document.querySelector("[data-hour-hand]"); 
const minuteHand = document.querySelector("[data-minute-hand]"); 
const secondHand = document.querySelector("[data-second-hand]"); 

function setClock(){
    const currentDate = new Date();
    const secondsRatio = currentDate.getSeconds() / 60;
    const minuteRatio = (secondsRatio + currentDate.getMinutes()) / 60;
    const hourRatio = (minuteRatio + currentDate.getHours()) / 12;

    setRotation(secondHand , secondsRatio);
    setRotation(minuteHand , minuteRatio);
    setRotation(hourHand , hourRatio);
}

function setRotation(element, rotationRatio){
    element.style.setProperty('--rotation', `${rotationRatio * 360}deg`); 
}

setClock();

CSS #

*, *::after, *::before {
    box-sizing: border-box;
}
body{
    background: linear-gradient(to right, hsl(200, 100%, 50%), hsl(170, 100%, 50%));
    display: flex;
    justify-content: center;
    align-items: center ;
    min-height: 100vh;
    overflow: hidden ;
}

.clock{
    background-color: rgba(255, 255, 255, .8);
    height: 300px;
    width: 300px;
    border-radius: 50%;
    border: 2px solid black;
    position: relative;
}
.clock::after{
    content: '';
    position: absolute;
    height: 15px;
    width: 15px;
    background: black;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 13;
    border-radius: 50%;
}
.clock .number{
    --rotation: 0;
    position: absolute;
    width: 100%;
    height: 100%; 
    text-align: center;
    transform: rotate(var(--rotation));
}

.clock .number1{ --rotation: 30deg;}
.clock .number2{ --rotation: 60deg;}
.clock .number3{ --rotation: 90deg;}
.clock .number4{ --rotation: 120deg;}
.clock .number5{ --rotation: 150deg;}
.clock .number6{ --rotation: 180deg;}
.clock .number7{ --rotation: 210deg;}
.clock .number8{ --rotation: 240deg;}
.clock .number9{ --rotation: 270deg;}
.clock .number10{ --rotation: 300deg;}
.clock .number11{ --rotation: 330deg;}

.clock .hand{
    --rotation: 0;
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 10px;
    height: 40%;
    background: black;
    border: 1px solid white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transform: translateX(-50%) rotate(var(--rotation));
    transform-origin: bottom;
    z-index: 10;
}

.clock .hand.hour{
    width: 10px;
    height: 30%;
    background: black;
}
.clock .hand.minute{
    width: 7px;
    height: 40%;
    background: black;
}
.clock .hand.second{
    width: 3px;
    height: 42%;
    background: red;
}

HTML（无需修改） #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>clock analog</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <script src="script.js" async defer></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div class="clock">
            <div class="hand hour" data-hour-hand></div>
            <div class="hand minute" data-minute-hand></div>
            <div class="hand second" data-second-hand></div>
            <div class="number number1">1</div>
            <div class="number number2">2</div>
            <div class="number number3">3</div>
            <div class="number number4">4</div>
            <div class="number number5">5</div>
            <div class="number number6">6</div>
            <div class="number number7">7</div>
            <div class="number number8">8</div>
            <div class="number number9">9</div>
            <div class="number number10">10</div>
            <div class="number number11">11</div>
            <div class="number number12">12</div>

        </div>
        
    </body>
</html>

内容的提问来源于stack exchange，提问作者Manav Mehta