模拟时钟 - JavaScript答案

【问题标题】：Analog clock - JavaScript模拟时钟 - JavaScript
【发布时间】：2021-08-15 06:17:21
【问题描述】：

我阅读了一个模拟时钟的代码，它的 JavaScript 包含以下内容：

  clockElement.style.setProperty("--seconds", offset + 6 * seconds + "deg");
  clockElement.style.setProperty("--hours", offset + 30 * hours + "deg");
  clockElement.style.setProperty("--minutes", offset + 6 * minutes + "deg");

我理解“度”部分以外的含义/值。它没有在其他任何地方被提及，而是在那些括号之间。
编辑： 偏移值为-90
我对“deg”的意思是......它没有任何价值。例如，CSS 如下所示：

#analogClock .second {
transform: rotate(var(--seconds));
}

那么，学位从何而来？

【问题讨论】：

转到 setProperty 方法，看看它做了什么！ :)

标签： javascript clock

【解决方案1】：

CSS中的角度值more

如果 offset 为 0（从您的代码 sn-p 中不清楚它的用途），并且 seconds 为 30 - 那么第一个语句将属性设置为 "180deg"（可能，像你一样向下箭头预计 30 秒）

【讨论】：

【解决方案2】：

在 CSS 中，变量是这样声明的：

--my-variable: 20px;

并像这样使用：

height: var(--my-variable);

（您可以了解更多关于 CSS 变量的信息here）

所以本质上它的作用是添加一个 CSS 变量，以便稍后在 CSS 中使用它，例如：

#clock {
   --angle: 0deg;
   transform: rotate(var(--angle));
}

但是你想让时钟走动，所以在设定的时间，JavaScript 会更新变量的值，导致指针走动。

【讨论】：