Question

<div class="clock">
<div class="space">
<div class="hourhand"></div>
<div class="minutehand"></div>
<div class="sechand" id="secc"></div>
</div>
</div>

function date(){
  var d = new Date();
  const sec= d.getSeconds();
  var x = document.getElementById('secc');
  x.style.transform="rotate(sec)";
  console.log(sec);
}
setInterval(date, 1000);

我使用vanilla js制作这个简单的时钟。（我没有显示CSS代码）。脚本标记中的行 - x.style.transform不会将sec作为输入吗？那么我应该如何将sec值传递给它以使其旋转？

Answer 1

Rotate语法：

transform: rotateZ(90deg)

这会导致在Z平面上旋转90度，但是在你的情况下你有一个你需要传入的变量。所以你需要将你的秒数转换为度数。

一分钟内秒针的总度数= 360度
一分钟内的秒数= 60秒
度数跨度为1秒=（360度/ 60秒）= 6度
```
transform: rotateZ(`${sec * 6}deg`)
```

代码：

x.style.transform=`rotateZ(${sec * 6}deg)`;

Answer 2

CSS transform property用于控制许多不同的转换，您正在寻找的转换是rotate。

旋转指定为deg（度，0-360），rad（弧度，0-2 *π）或turn（0-1）

在这种情况下，我会选择turn，因为旋转的计算非常直接：now / max（例如下午三点：15 / 24）

简单的例子（注意：对齐句柄我并没有太多困扰）

setInterval(function() {
  var date = new Date(),
      positions = [
        date.getHours() / 24,
        date.getMinutes() / 60,
        date.getSeconds() / 60
      ],
      clock = document.querySelector('.clock');

  positions.forEach(function(rotation, index) {
    clock.children[index].style.transform = 'rotate(' + rotation + 'turn)';
  });

}, 1000);

.clock {
  position:  relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid gold;
}

.clock > * {
  position: absolute;
  bottom: 50%;
  left: 50%;
  height:  50%;
  margin-left: -1px;
  border: 2px solid #000;
  transform-origin: bottom;
}

.hourhand {
  height: 30%;
}

.sechand {
  border-color: #f00;
}

<div class="clock">
  <div class="hourhand"></div>
  <div class="minutehand"></div>
  <div class="sechand"></div>
</div>

如果您想要更多劳力士效果（每秒不打勾），您可以设置间隔非常短（例如20ms）并根据getTime计算二手旋转而不是{{ 1}}（getSeconds提供自“Unix Epoch”（getTime）以来的毫秒数，例如：

1970-01-01 00:00:00.000

Answer 3

首先，当您使用css transofrm-rotate时，需要指定unit（rad / deg / turns）。

第二件事是，你的javascript对象并没有神奇地将自己变成有效的css值，你需要像这样构建css值：

x.style.transform="rotate(" + (6 * sec) + "deg)";

注意6*sec，因为我们希望每回合360度（每秒60度）。

使用香草js旋转时钟指针

3 个答案: