如何用jquery流畅地移动模拟类的秒针

Question

我想移动秒针顺利，因为我已经看到许多手表移动他们的秒针迅速与滴答滴答运动，我试图使它与过渡变换css，但有些东西是错误的，不顺利。我有59到0秒的问题和页面加载移动。有人能帮我修一下吗?我应该用interval

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

问题是你的分泌物每分钟从0度开始。你需要每过一分钟增加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>