使用香草js旋转时钟手

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);

我正在用普通的js制作这个简单的时钟(我还没有显示CSS代码)。脚本标记- x.style.transform中的行不接受sec作为其输入？那么我应该如何将sec值传递给它以使其旋转呢？

Answer 1

首先，当您使用css 换位-旋转时，需要指定一个单元(rad/deg/单元)。

第二件事是，javascript对象不会神奇地将自己的css转换为有效的css值，您需要构建如下所示的css值：

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

注意6*sec，因为我们希望每个转弯有360度(从每秒60度)。

Answer 2

旋转语法：

transform: rotateZ(90deg)

这将导致在Z平面上旋转90度，但是在你的例子中，你有一个变量，你需要传递。所以你需要把你的秒转换成度。

1. 用秒表示的总度= 360度
2. 1分钟内的秒=60
3. 1秒钟内的度=(360度/60秒)=6度 变换: rotateZ(${sec \* 6}deg)

对于您的代码：

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

Answer 3

属性用于控制许多不同的转换，您要寻找的是rotate。

旋转是在deg (度，0-360)，rad (弧度，0-2*π)或turn (0-1)中指定的。

在这种情况下，我选择turn，因为旋转的计算非常直接：now / max (例如下午3点：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>

​

如果您想要更多的劳力士效应(而不是每秒滴答)，您可以设置非常短的间隔(例如，20 on )，并根据getTime而不是getSeconds计算二手旋转(getTime提供自"Unix“(1970-01-01 00:00:00.000)以来的毫秒数，例如：

date.getTime() / 60000