时间戳

首页 > 解决方案 > javascript转换根本不适用

javascript - javascript转换根本不适用

问题描述

很少介绍，所以我只使用 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 文件时，它没有任何想法吗？

标签： javascripthtmlcssanimationtransform

解决方案

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 代码中的引用。

推荐阅读