javascript 转换根本不适用

Question

介绍不多，所以我只使用 CSS 和 HTML 制作了一个动画时钟作为作业，但我想了解更多所以我一直在寻找小时同步，我我决定用 JS 来做，试过了但不知道为什么它不改变初始状态，动画只是从 12h 的针开始。位置（原始状态）：

let seconds = document.getElementById("seconds");
let hours = document.getElementById("hours");
let minutes = document.getElementById("minutes");
let date = new Date();
let dateMinutes = date.getMinutes();
let dateSeconds = date.getSeconds();
let dateHours = date.getHours();
let currentHour = dateHours + date.getTimezoneOffset();
console.log(dateHours, dateMinutes, dateSeconds);
seconds.style.animationPlayState = "paused";
minutes.style.animationPlayState = "paused";
hours.style.animationPlayState = "paused";
if (currentHour > 12) {
  currentHour = currentHour / 2;
}
let percentHours = (360 / 43200) * (currentHour * 3600);
let percentMin = dateMinutes * 6;
let percentSec = dateSeconds * 6;
seconds.style.transform = "rotateZ(" + percentSec + "deg)";
minutes.style.transform = "rotateZ(" + percentMin + "deg)";
hours.style.transform = "rotateZ(" + percentHours + "deg)";
seconds.style.mozTransform = "rotateZ(" + percentSec + "deg)";
minutes.style.mozTransform = "rotateZ(" + percentMin + "deg)";
hours.style.mozTransform = "rotateZ(" + percentHours + "deg)";
seconds.style.webkitTransform = "rotate(" + percentSec + "deg)";
minutes.style.webkitTransform = "rotate(" + percentMin + "deg)";
hours.style.webkitTransform = "rotate(" + percentHours + "deg)";
seconds.style.animationPlayState = "running";
minutes.style.animationPlayState = "running";
hours.style.animationPlayState = "running";

#clock {
  width: 400px;
  height: 400px;
  margin: 20px auto;
  border: 15px solid rgba(29, 29, 29, 1);
  border-radius: 50%;
  position: relative;
  background-color: rgba(117, 141, 163, 0.37);
  background-image: url(clock2.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#seconds {
  position: absolute;
  width: 2px;
  height: 180px;
  border-top: 2px solid #131111;
  border-left: 2px solid #131111;
  border-right: 2px solid #131111;
  border-radius: 4px;
  background-color: rgb(255, 28, 17);
  top: 20px;
  left: 197px;
  animation: rotarSeg 60s infinite;
  animation-timing-function: steps(60);
  transform-origin: bottom center;
}

#minutes {
  position: absolute;
  width: 4px;
  height: 160px;
  right: 196px;
  border-top: 4px solid #131111;
  border-left: 2px solid #131111;
  border-right: 2px solid #131111;
  border-radius: 50%;
  background-color: rgb(246, 248, 248);
  margin-top: 38px;
  animation: rotarSeg 3600s infinite;
  animation-timing-function: steps(60);
  transform-origin: bottom center;
}

#hours {
  position: absolute;
  width: 6px;
  height: 120px;
  top: 74px;
  left: 193px;
  border-top: 6px solid #131111;
  border-left: 4px solid #131111;
  border-right: 4px solid #131111;
  border-radius: 50%;
  background-color: rgba(255, 246, 193, 0.705);
  animation: rotar 43200s infinite linear;
  transform-origin: bottom center;
}

当我在服务器中执行 HTML 文件时，它不起作用，请问有什么想法吗？

Answer 1

let seconds = document.getElementById("seconds");
let hours = document.getElementById("hours");
let minutes = document.getElementById("minutes");
let date = new Date();
let dateMinutes = date.getMinutes();
let dateSeconds = date.getSeconds();
let dateHours = date.getHours();
let currentHour = dateHours + date.getTimezoneOffset();
console.log(dateHours, dateMinutes, dateSeconds);
seconds.style.animationPlayState = "paused";
minutes.style.animationPlayState = "paused";
hours.style.animationPlayState = "paused";
if (currentHour > 12) {
  currentHour = currentHour / 2;
}
let percentHours = (360 / 43200) * (currentHour * 3600);
let percentMin = dateMinutes * 6;
let percentSec = dateSeconds * 6;
seconds.style.transform = "rotateZ(" + percentSec + "deg)";
minutes.style.transform = "rotateZ(" + percentMin + "deg)";
hours.style.transform = "rotateZ(" + percentHours + "deg)";
seconds.style.mozTransform = "rotateZ(" + percentSec + "deg)";
minutes.style.mozTransform = "rotateZ(" + percentMin + "deg)";
hours.style.mozTransform = "rotateZ(" + percentHours + "deg)";
seconds.style.webkitTransform = "rotate(" + percentSec + "deg)";
minutes.style.webkitTransform = "rotate(" + percentMin + "deg)";
hours.style.webkitTransform = "rotate(" + percentHours + "deg)";
seconds.style.animationPlayState = "running";
minutes.style.animationPlayState = "running";
hours.style.animationPlayState = "running";

#clock {
  width: 400px;
  height: 400px;
  margin: 20px auto;
  border: 15px solid rgba(29, 29, 29, 1);
  border-radius: 50%;
  position: relative;
  background-color: rgba(117, 141, 163, 0.37);
  background-image: url(clock2.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#seconds {
  position: absolute;
  width: 2px;
  height: 180px;
  border-top: 2px solid #131111;
  border-left: 2px solid #131111;
  border-right: 2px solid #131111;
  border-radius: 4px;
  background-color: rgb(255, 28, 17);
  top: 20px;
  left: 197px;
  animation: rotarSeg 60s infinite;
  animation-timing-function: steps(60);
  transform-origin: bottom center;
}

#minutes {
  position: absolute;
  width: 4px;
  height: 160px;
  right: 196px;
  border-top: 4px solid #131111;
  border-left: 2px solid #131111;
  border-right: 2px solid #131111;
  border-radius: 50%;
  background-color: rgb(246, 248, 248);
  margin-top: 38px;
  animation: rotarSeg 3600s infinite;
  animation-timing-function: steps(60);
  transform-origin: bottom center;
}

#hours {
  position: absolute;
  width: 6px;
  height: 120px;
  top: 74px;
  left: 193px;
  border-top: 6px solid #131111;
  border-left: 4px solid #131111;
  border-right: 4px solid #131111;
  border-radius: 50%;
  background-color: rgba(255, 246, 193, 0.705);
  animation: rotar 43200s infinite linear;
  transform-origin: bottom center;
}

<span id="hours"></span>
<span id="minutes"></span>
<span id="seconds"></span>

编译：

问题的根源在于 seconds 未定义。请参阅上面代码中修复该问题的指针。

添加了虚拟 HTML 并修复了前 3 行 JS 代码中的引用。

javascript 转换根本不适用

javascript transform doesn't apply at all

html

javascript

css

animation

transform