所以我正在制作一个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);
// console.log(hourRatio);
}
function setRotation(element, rotationRation){
element.style.setProperty('--rotation', 'rotationRation * 360');
}
setClock();*, *::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(calc(var(--rotation)));
/* transform: ; */
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;
}<!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>使用console.log((，我发现setClock正在按照设置的间隔时间运行，我也在使用Date((获取值，并且用于获取转弯角度的公式也在工作，我怀疑问题出在setRotation((上，但我不知道问题出在哪里。
让我知道这是否解决了您的问题。基本上你没有正确计算角度。它是作为字符串传递的。
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);
// console.log(hourRatio);
}
function setRotation(element, rotationRatio){
element.style.setProperty('--rotation', rotationRatio * 360+'deg');
}
setClock();*, *::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(calc(var(--rotation)));
/* transform: ; */
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;
}<!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>