Javascript CSS变换始终顺时针旋转，但不超过360度

我在为“手”设计时钟，我使用JS和CSS的组合制作平滑的动画，将秒、分钟和小时转换为模拟时钟中的相应程度：

function clock() { 
  var t = moment(),
      s = t.seconds() * 6,
      a = t.minutes() * 6,
      o = t.hours() % 12 / 12 * 360 + (a / 12);

  $(".hour").css("transform", "rotate(" + o + "deg)");
  $(".minute").css("transform", "rotate(" + a + "deg)");
  $(".second").css("transform", "rotate(" + s + "deg)");
}

setInterval(clock, 1000);

问题是，在达到360度后，我不希望变量永远增加，我只是返回到0并重新开始，但是CSS使手逆时针转动，产生了不希望的效果

---

我正在考虑使用JS删除transition属性，当我即将从360变为0，然后再将其放入时，这可能是一个解决方案，但我想知道是否有更干净的方法。

它不能以本机方式完成。从356度到2度的转换总是逆时针进行。如果您不介意从356度到2度的可见刻度，只需删除过渡。但是没有理由这么做。尝试利用

rotate

可以接受任何正常值的事实，也可以超过360度。因此，不要返回0，只需让时钟继续“无休止地”增加值（js中的最高int值为9007199254740991，因此您必须在几百万年后刷新浏览器…：）

到目前为止，您可以在setInterval回调之外的单独

计数器
对象中跟踪旋转，如下所示：

var counter = {
  s: 0,
  a: 0,
  o: 0
};

var previous = null;

然后，您希望将上一次迭代的所有值存储在某个位置，并将当前值与上一次迭代的值进行比较。如有必要，将相应计数器增加一个

if(previous){
  if(s < previous.s){
    counter.s += 1;
  }
  if(a < previous.a){
    counter.a += 1;
  }
  if(o < previous.o){
    counter.o += 1;
  }
}

previous = {
  s: s,
  a: a,
  o: o
};

工作小提琴：
它不能在本地完成。从356度到2度的转换总是逆时针进行。如果您不介意从356度到2度的可见刻度，只需删除过渡。但是没有理由这么做。尝试利用
rotate
可以接受任何正常值的事实，也可以超过360度。因此，不要返回0，只需让时钟继续“无休止地”增加值（js中的最高int值为9007199254740991，因此您必须在几百万年后刷新浏览器…：）

到目前为止，您可以在setInterval回调之外的单独
计数器
对象中跟踪旋转，如下所示：

var counter = {
  s: 0,
  a: 0,
  o: 0
};

var previous = null;

然后，您希望将上一次迭代的所有值存储在某个位置，并将当前值与上一次迭代的值进行比较。如有必要，将相应计数器增加一个

if(previous){
  if(s < previous.s){
    counter.s += 1;
  }
  if(a < previous.a){
    counter.a += 1;
  }
  if(o < previous.o){
    counter.o += 1;
  }
}

previous = {
  s: s,
  a: a,
  o: o
};

工作小提琴：
Hey@DomingoSL。。。就几点。1） 请随意查看我制作的版本。。按CRTL+U以查看源。此外，每秒更新一次（1000毫秒）也行不通。问题在于，您每1000毫秒更新一次并不意味着实际时间发生了变化（稍后您将在项目中看到我的意思）。祝你好运谢谢你@TrevorClarke，但你显然不明白我的方法，请看一下“momentjs”是什么。哦，那太美了嘿@DomingoSL。。。就几点。1） 请随意查看我制作的版本。。按CRTL+U以查看源。此外，每秒更新一次（1000毫秒）也行不通。问题在于，您每1000毫秒更新一次并不意味着实际时间发生了变化（稍后您将在项目中看到我的意思）。祝你好运谢谢@TrevorClarke，但你显然不理解我的方法，请看一下“momentjs”是什么。哦，这很漂亮