1

我正在制作一些简单的 css3 手表，它的工作方式是这样的（只需计算分钟、秒和小时轮换并应用它

  var updateWatch = function() {
      var seconds = new Date().getSeconds();
      var hours = new Date().getHours();
      var mins = new Date().getMinutes();

      var sdegree = seconds * 6;
      var srotate = "rotate(" + sdegree + "deg)";

      var hdegree = hours * 30 + (mins / 2);
      var hrotate = "rotate(" + hdegree + "deg)"; 

      var mdegree = mins * 6;
      var mrotate = "rotate(" + mdegree + "deg)";

      $(".jquery-clock-sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
      $(".jquery-clock-hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
      $(".jquery-clock-min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});            
  }

所有动画都有一些缓和。

一切正常，但是当某个标记完全旋转时，360 度变为 0 度，然后标记使所有圆圈返回。有什么简单的方法可以避免吗？

4

1 回答 1

2

当您将标记从 359 度更改为 0 度时，标记向后移动是合乎逻辑的。

合乎逻辑的答案是避免截断数据。

我会得到时间（小数部分），将其转换为秒，将其转换为度数，然后使用它。

如果结果数字是无数度，请不要担心，它会映射到正确的位置。

并且当它从数亿度变为数亿+ 1时，它会包裹好，而这恰好发生了新的旋转。

正如我之前所说，为了避免准确性问题，只使用不包括日期的时间。

于 2013-10-08T17:11:36.227 回答