преобразование javascript вообще не применяется

ProgramBox

преобразование javascript вообще не применяется

Post author:admin
Запись опубликована:5 марта, 2023
Post category:Вопросы по программированию

#javascript #html #css #animation #transform

#javascript #HTML #css #Анимация #преобразование

Вопрос:

Небольшое введение, поэтому я сделал анимированные часы в качестве домашнего задания, просто используя 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-файл на сервере, он не работает, какие-нибудь идеи, пожалуйста?

Ответ №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-кода.

1. Спасибо за ваш ответ и дайте мне знать, что я идиот, я должен сказать, что после устранения очевидной проблемы в первых трех строках проблема все еще существует, я не знаю почему, но она есть. seconds.style.animationPlayState=»приостановлено»; в этом предложении объект seconds имеет значение null

2. Добро пожаловать! И нет, ты не идиот. Если только все мы — разработчики — не 🙂 Мы все совершаем ошибки, и это помогает нам учиться.