javascript - 用 CSS 制作的时钟箭头无法正常工作

Question

我使用 CSS 制作了一个模拟时钟并旋转了它的箭头。这工作正常但是当我设置开始时间时出现问题。例如，如果现在是中午 12:00，则第二个箭头会在 60 秒内完全旋转，分针会在 3600 秒内完全旋转，时针会在 43200 秒内完成。但是，如果时间是下午 3:15:20，第二个箭头应该从 20 秒开始移动。在这种情况下，我使用 css 通过 rotate(120deg) 设置起点。但是无论如何，我的箭头从数字 4 旋转到 12 60 秒，然后简单地跳到起点。我该如何解决这个问题？

看到 fiddle ，只有第二个箭头，但我认为问题是可见的: https://jsfiddle.net/vaxobasilidze/fdn28u7g/2/

function setTime(){
    var time = new Date($.now());
    var hour = time.getHours();
    var minute = time.getMinutes();
    var second = time.getSeconds();
    var hourdeg = ((hour%12)*3600+minute*60+second)/43200*360;
    var minutedeg = (minute*60+second)/3600*360;
    var seconddeg = second/60*360;
    $('.hour').css({'transform':'rotate('+hourdeg+'deg)'});
    $('.minute').css({'transform':'rotate('+minutedeg+'deg)'});
    $('.second').css({'transform':'rotate('+seconddeg+'deg)'});
  }

setTime();

.second {
	max-height: 80%;
    margin-left: 20%;
	z-index: 11;
	-webkit-animation:spin 60s linear infinite;
    -moz-animation:spin 60s linear infinite;
    animation:spin 60s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://moziru.com/images/clock-clipart-arrow-5.png" width="30px" height="300px" alt="second" title="second" class="clockHands second"/>

Answer 1

您正在更改旋转原点，而不是从 0 度旋转到 360 度，而是从 180 度旋转到 360 度。
这会导致动画看起来更慢，并且会从 360 度跳回到 180 度。

您可以通过用包装器包裹旋转元素并旋转包装器来避免这种情况。

function setTime() {
  var time = new Date($.now());
  var hour = time.getHours();
  var minute = time.getMinutes();
  var second = time.getSeconds();
  var hourdeg = ((hour % 12) * 3600 + minute * 60 + second) / 43200 * 360;
  var minutedeg = (minute * 60 + second) / 3600 * 360;
  var seconddeg = second / 60 * 360;
  $('.hour').css({
    'transform': 'rotate(' + hourdeg + 'deg)'
  });
  $('.minute').css({
    'transform': 'rotate(' + minutedeg + 'deg)'
  });
  //$('.second').addClass('.instant')
  $('.second-wrapper').css({
    'transform': 'rotate(' + seconddeg + 'deg)'
  });

}

setTimeout(() => {
  setTime()
}, 500);

.second-wrapper {
  transition: transform 2s ease;
  transform: rotate(0deg);
  transform-origin: center center;
  background-color: WhiteSmoke;
  display: inline-block;
  margin-left: 20%;
}

.second {
  max-height: 80%;
  -webkit-animation: spin 60s linear infinite;
  -moz-animation: spin 60s linear infinite;
  animation: spin 60s linear infinite;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="second-wrapper">
  <img src="http://moziru.com/images/clock-clipart-arrow-5.png" width="30px" height="300px" alt="second" title="second" class="clockHands second" />
</div>