创建了一个javascript时钟，但它无法正常工作css对其进行了正确的样式设置，但实际上并没有显示时间。非常感谢您的提示和建议，谢谢！如果可以的话，请在你回答时解释一下我做错了什么^-^所有代码都在代码笔上，链接在下方
https://codepen.io/codinchopin2117/pen/vYKRNBp
这是代码
/
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript Clock</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
<script type="text/javascript">
const deg = 6;
const hr = document.querySelector('#hr');
const mn = document.querySelector('#mn');
const sc = document.querySelector('#sc');
setInterval(() => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
hr.style.transform = 'rotatez(${(hh)+(mm/12)}deg)';
mn.style.transform = 'rotatez(${mm}+deg)';
sc.style.transform = 'rotatez(${ss}+deg)';
})
</script>
</body>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #9B0C43;
}
.clock {
width: 350px;
height: 350px;
display: flex;
justify-content: center;
align-items: center;
background-image: url(clock.png);
background-size: cover;
border: 4px solid #000;
border-radius: 50%;
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.3),
inset 0 15px 15px rgba(0, 0, 0, 0.3);
}
.clock::before
{
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #FFF;
border-radius: 50%;
z-index: 10000;
}
.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: #FFF;
z-index: 10;
border-radius: 6px 6px 0 0;
}
.mn:before {
content: '';
position: absolute;
width: 4px;
height: 90px;
background: #F7F0D6;
z-index: 11;
border-radius: 6px 6px 0 0;
}
.sc:before {
content: '';
position: absolute;
width: 2px;
height: 150px;
background: #F7F0D6;
z-index: 12;
border-radius: 6px 6px 0 0;
}
这里的问题是，您使用$｛｝是错误的，因为您必须将它们和字符串放在"而不是"或"中&"；。你所要做的就是更换
hr.style.transform = 'rotatez(${(hh)+(mm/12)}deg)';
mn.style.transform = 'rotatez(${mm}+deg)';
sc.style.transform = 'rotatez(${ss}+deg)';
带有
hr.style.transform = `rotatez(${(hh)+(mm/12)}deg)`;
mn.style.transform = `rotatez(${mm}deg)`;
sc.style.transform = `rotatez(${ss}deg)`;
您应该执行
hr.style.transform = `rotate(${(hh)+(mm/12)}deg)`;
mn.style.transform = `rotate(${mm}deg)`;
sc.style.transform = `rotate(${ss}'deg')`;
因此，首先，函数或您调用的${}只能在backticks中使用``而不是"或""第三，不需要值和度之间的+我也会使用rotate而不是rotatez，即使你使用rotatez，它的Z也不是Z，但这是一个很好的实践问题，不会破坏你的代码