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

It is logical that the marker goes backwards when you change it from 359 deg to 0 deg.

The logical answer would be to avoid truncating the data.

I would get the time (fractionary part), convert it to seconds, convert that to degrees, and use that.

Don't worry if the resulting number is a zillion degrees, it will map to the correct position.

And it will wrap ok when going from a zillion degrees to a zillion + 1, when that happens to make a new rotation.

Just to avoid accuracy problems, as I said before, use only the time excluding the day.

于 2013-10-08T17:11:36.227 に答える