Question

我正在制作一些简单的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});            
  }

所有动画都有一些缓解。

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

Answer 1

当您将标记从359度更改为0度时，标记会向后倾斜是合乎逻辑的

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

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

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

当它从一个数百万度增加到数百万+ 1时，它会包好，当这恰好会产生新的旋转。

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

css3变换从360deg旋转到0deg

1 个答案: