如何使用jquery

Question

我想要顺利地移动秒针，因为我看到很多手表快速移动他们的秒针而没有做出勾选动作，我尝试使用过渡变换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开始。 你需要为每一分钟添加360deg。

＆＃13;

＆＃13;

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);

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;