javascript - 如何使用 jquery 平滑地移动模拟类的秒针

Question

我想平滑地移动秒针，因为我看到许多 watch 快速移动秒针而不做滴答运动，我尝试使用过渡变换 css 来实现它，但出了点问题而且不流畅。我在 59 到 0 秒和页面加载移动方面有问题。任何人都可以帮我解决它？我应该使用间隔。

function displayTime() {
  var date = new Date();
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var secend = date.getSeconds();
  var rotate0 = hours * 30;
  var rotate1 = minutes * 0.45;
  var horotate = rotate0 + rotate1;
  var minrotate = minutes * 6;
  var secrotate = secend * 6;
  $('#hour').css("-webkit-transform", " rotate(" + horotate + "deg)");
  $('#min').css("-webkit-transform", " rotate(" + minrotate + "deg)");
  $('#sec').css("-webkit-transform", " rotate(" + secrotate + "deg)");
}
var interval;

interval = setInterval(displayTime, 500);

#sec {
  -webkit-transform-origin: center bottom;
  -webkit-transition: -webkit-transform 1s linear;
  z-index: 10;
  width: 2px;
  height: 80px;
  background: red;
  position: absolute;
  right: 0;
  left: 0;
  top: 20px;
  margin: auto;
}
body {
  background: #CCC;
}
#clock {
  width: 200px;
  height: 200px;
  background: #FFF;
  border-radius: 50%;
  position: relative;
}
#min {
  width: 4px;
  height: 75px;
  background: black;
  position: absolute;
  right: 0;
  left: 0;
  top: 25px;
  margin: auto;
  -webkit-transform-origin: center bottom;
  -webkit-transform: rotate(0deg);
  z-index: 8;
}
#hour {
  width: 4px;
  height: 50px;
  background: black;
  position: absolute;
  right: 0;
  left: 0;
  top: 50px;
  margin: auto;
  -webkit-transform-origin: center bottom;
  -webkit-transform: rotate(0deg);
  z-index: 6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="clock">
  <div id="hour"></div>
  <div id="min"></div>
  <div id="sec"></div>
</div>

Answer 1

问题是您的 secrotate 每分钟从 0deg 重新开始。每经过一分钟，您都需要添加 360 度。

var displayTime = (function (firstMin, firstHour) {
  return function () {
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var second = date.getSeconds();
    var rotate0 = hours * 30;
    var rotate1 = minutes * 0.45;
    var horotate = rotate0 - rotate1;
    var minrotate = (360*(hours - firstHour)) + (minutes * 6);
    var secrotate = (360*(minutes - firstMin)) + (second * 6);
    $('#hour').css("-webkit-transform", " rotate(" + horotate + "deg)");
    $('#min').css("-webkit-transform", " rotate(" + minrotate + "deg)");
    $('#sec').css("-webkit-transform", " rotate(" + secrotate + "deg)");
  };
}( (new Date()).getMinutes(), (new Date()).getHours() ));
var interval;

displayTime();
setTimeout(function () {
  $('#sec').css("-webkit-transition", "-webkit-transform 1s linear");
  interval = setInterval(displayTime, 500);
}, 0);

#sec {
  -webkit-transform-origin: center bottom;
  z-index: 10;
  width: 2px;
  height: 80px;
  background: red;
  position: absolute;
  right: 0;
  left: 0;
  top: 20px;
  margin: auto;
}
body {
  background: #CCC;
}
#clock {
  width: 200px;
  height: 200px;
  background: #FFF;
  border-radius: 50%;
  position: relative;
}
#min {
  width: 4px;
  height: 75px;
  background: black;
  position: absolute;
  right: 0;
  left: 0;
  top: 25px;
  margin: auto;
  -webkit-transform-origin: center bottom;
  -webkit-transform: rotate(0deg);
  z-index: 8;
}
#hour {
  width: 4px;
  height: 50px;
  background: black;
  position: absolute;
  right: 0;
  left: 0;
  top: 50px;
  margin: auto;
  -webkit-transform-origin: center bottom;
  -webkit-transform: rotate(0deg);
  z-index: 6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="clock">
  <div id="hour"></div>
  <div id="min"></div>
  <div id="sec"></div>
</div>