Question

我有一个用纯Javascript和CSS编写的时钟。每当新的分钟开始时，负责旋转时钟指针的我的const将重新计算为第一个值（90度）。它会引起问题，因为时钟的指针应该从末端旋转回第一个位置。我希望我的旋转值不会重新启动，并始终使用当前旋转值继续新的分钟\小时。

Check my demo

我做什么？

CSS

.clock {
width: 20rem;
height: 20rem;
border: 1px solid rgba(0, 0, 0, .3);
background: #ffafbd;
/* Old browsers */
background: -moz-linear-gradient(top, #ffafbd 0%, #ffc3a0 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffafbd 0%, #ffc3a0 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffafbd 0%, #ffc3a0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffafbd', endColorstr='#ffc3a0', GradientType=0);
/* IE6-9 */
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 2rem;
}

.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px);
/* account for the height of the clock hands */
}

.hand {
width: 50%;
height: 2px;
background: #4568dc;
/* Old browsers */
background: -moz-linear-gradient(top, #4568dc 0%, #b06ab3 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #4568dc 0%, #b06ab3 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4568dc 0%, #b06ab3 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4568dc', endColorstr='#b06ab3', GradientType=0);
/* IE6-9 */
position: absolute;
top: 50%;
transform: rotate(90deg);
transform-origin: 100%;
transition: transform .2s cubic-bezier(0, 2.48, 0.72, 0.66);
}

.hour-hand {
top: 45%;
left: 32.5%;
width: 35%;
transform-origin: 75%;
}

的JavaScript

const secondHand = document.querySelector(".second-hand");
const minutesHand = document.querySelector(".min-hand");
const hourHand = document.querySelector(".hour-hand");

function getDate() {
  const now = new Date();

  const seconds = now.getSeconds();
  const secondsRotate = ((seconds / 60) * 360) + 90;
  secondHand.style.transform = `rotate(${secondsRotate}deg)`;


  const minutes = now.getMinutes();
  const minutesRotate = ((minutes / 60) * 360) + 90;
  minutesHand.style.transform = `rotate(${minutesRotate}deg)`;

  const hours = now.getHours();
  const hoursRotate = ((hours / 12) * 360) + 90;
  hourHand.style.transform = `rotate(${hoursRotate}deg)`;

  console.log(hours);
}

setInterval(getDate, 1000);

Answer 1

基于在特定秒钟修改过渡曲线，我遇到了这个解决方案：

function getDate() {
  const now = new Date();

  const seconds = now.getSeconds();
  secondsRotate = ((seconds / 60) * 360) + 90;
  if(seconds == 0) {
    secondHand.style.transitionDuration = "1s";
    secondHand.style.transitionTimingFunction = "cubic-bezier(0.545, 0.060, 0.360, 1.225)";
    secondsRotate = ((1 / 60) * 360) + 90;
  }
  else if(seconds == 1) {
    secondHand.style.transitionDuration = "0.2s";
    secondHand.style.transitionTimingFunction = "cubic-bezier(0, 2.48, 0.72, 0.66)";
  }
  secondHand.style.transform = `rotate(${secondsRotate}deg)`;


  const minutes = now.getMinutes();
  const minutesRotate = ((minutes / 60) * 360) + 90;
  minutesHand.style.transform = `rotate(${minutesRotate}deg)`;

  const hours = now.getHours();
  const hoursRotate = ((hours / 12) * 360) + 90;
  hourHand.style.transform = `rotate(${hoursRotate}deg)`;

  console.log(minutesRotate);
}

Codepen：http://codepen.io/anon/pen/bgpvoe

Answer 2

当secondHand.style.transition secondHand旋转度达到90时，您可以简单地停用transform：

  const secondsRotate = ((seconds / 60) * 360) + 90;

  if(secondsRotate == 90) {
    secondHand.style.transition = "none";
  } else {
    secondHand.style.transition = "transform .2s cubic-bezier(0, 2.48, 0.72, 0.66)";
  }

  secondHand.style.transform = `rotate(${secondsRotate}deg)`;

在此处查看：http://codepen.io/clytras/pen/bgpvxB

如何在每次完成时停止重新计算价值？

2 个答案: