Javascript 如何停止每次重新计算值'；什么时候结束？

我有一个用纯Javascript和CSS编写的时钟。每次新的一分钟开始时，负责旋转时钟指针的常数都会重新计算到第一个值（90度）。这会导致问题，因为时钟的指针应该从末端旋转回第一个位置。 我希望我的旋转值不会重新启动，并始终以当前旋转值在新的分钟\小时上运行

我做什么

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

---

我曾经遇到过这样一种解决方案，它基于在特定秒修改过渡曲线：

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:

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

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:

当

二手
变换
旋转角度达到90度时，您可以简单地禁用
二手.style.transition

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

看到它在这里工作：
当
二手
变换
旋转角度达到90度时，您可以简单地禁用
二手.style.transition

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

看到它在这里工作：
const secondsRotate=（（秒/60）*360）+90）%360
@Weedoze同样的结果你的问题是你总是把你的秒设置成3度左右的动画，但是突然你把它们设置成360度。你必须移除-360度变化的变换，它不会闪烁。
const secondsRotate=（（秒/60）*360）+90）%360
@Weedoze同样的结果你的问题是你总是把你的秒设置成3度左右的动画，但是突然你把它们设置成360度。您必须删除该变换-360度变化，它不会闪烁。