模拟时钟的指针无法正常工作

Question

代码的 java 脚本部分有问题 时针未正常工作。它每 60 秒旋转一次。另外，分针显示的时间不正确。请检查用js编写的公式。我用过的公式也是gfg写的。请解释必要的更改。谢谢。

const secHand=document.querySelector('.second-hand');
const minhand=document.querySelector('.minute-hand');
const hrhand=document.querySelector('.hour-hand');
function setDate(){
const d=new Date();
const hr=d.getHours();
const m=d.getMinutes();
const sethrdeg= 30*hr + m/2;
hrhand.style.transform=`rotate(${sethrdeg}deg)`;
const setmdeg=6*m;
minhand.style.transform=`rotate(${setmdeg}deg)`;
const s=d.getSeconds();
const setsdeg=6*s;
secHand.style.transform=`rotate(${setsdeg}deg)`;
}

setInterval(setDate,1000);

*{
    background:url(https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80);
    margin: 0;
    padding: 0;
    font-family: Georgia, 'Times New Roman', Times, serif;
    background-size: cover;
}

body{
    display: flex;
    height: 100vh;
    align-items: center;
}

.clock{
    border : 3px solid black;
    border-radius: 50%;
    padding: 5px;
    position: relative;    
    left:30rem;
    width: 25rem;
    height: 25rem;
    justify-content: center;
    box-shadow:
    0 0 0 4px rgba(0,0,0,0.1),
    inset 0 0 0 3px #EFEFEF,
    inset 0 0 10px black,
    0 0 10px rgba(0,0,0,0.2);
}

.clock-face{
    position :relative;
    transform: translateY(-3px);
}

.hand{
    background: white;
    width: 48%;
    height: 1.5%;
    position: absolute;
    top :50%;
    transform-origin: 100%;
    transform: rotate(90deg);
    transition: all 0.06s;
    transition-timing-function: cubic-bezier(0.1, 1.09, 0.52, 1.26);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clock</title>
    <link rel="stylesheet" href="clock.css">
</head>
<body>
    <div class="clock">
        <div class="clock-face"></div>
        <div class="hand hour-hand"></div>
        <div class="hand minute-hand"></div>
        <div class="hand second-hand"></div>
    </div>


    <script src="clock.js"></script>
    
</body>
</html>

Answer 1

关于错位手的问题是由于显示 00:00:00 需要旋转 90 度。所以在计算中，你总是要加上这个90度。

关于计算本身：
时钟有 360 度 12 小时 (360/12) 和 60 minutes/seconds (360/60).

要让时针在小时节之间不断移动而不是跳到小时节：小时节是 (360 * hr) / 12，这一小时经过的分钟数是 (360 * m) / (12 * 60)。
同样的概念也适用于分针。

最后，秒针在从 59 度变为 0 时奇怪地跳动。这是由于旋转从 359 度变为零而不是 360 度。所以实际上指针是向后动画（逆时针）非常快。为了解决这个问题，我只是添加了一行以在 0 秒时删除过渡动画。

secHand.classList.toggle("hand-transition", s != 0);

看看.toggle([class],[force])。

const secHand = document.querySelector(".second-hand");
const minhand = document.querySelector(".minute-hand");
const hrhand = document.querySelector(".hour-hand");

function setDate() {
  const d = new Date();
  const hr = d.getHours();
  const m = d.getMinutes();
  const s = d.getSeconds();

  // Remove the transition at 0 sec.
  secHand.classList.toggle("hand-transition", s != 0);

  const sethrdeg = (360 * hr) / 12 + (360 * m) / (12 * 60) + 90; // 30 * hr + m / 2;
  hrhand.style.transform = `rotate(${sethrdeg}deg)`;

  const setmdeg = (360 * m) / 60 + (360 * s) / (60 * 60) + 90; // 6 * m;
  minhand.style.transform = `rotate(${setmdeg}deg)`;

  const setsdeg = (360 / 60) * s + 90; // 6 * s;
  secHand.style.transform = `rotate(${setsdeg}deg)`;
}

setInterval(setDate, 1000);

* {
  background: url(https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80);
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  background-size: cover;
}

body {
  display: flex;
  height: 100vh;
  align-items: center;
}

.clock {
  border: 3px solid black;
  border-radius: 50%;
  padding: 5px;
  position: relative;
  left: 30rem;
  width: 25rem;
  height: 25rem;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef,
    inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
}

.clock-face {
  position: relative;
  transform: translateY(-3px);
}

.hand {
  background: white;
  width: 48%;
  height: 1.5%;
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
}

/* Specific class for the transition, so it can be removed */
.hand-transition {
  transition: all 0.06s;
  transition-timing-function: cubic-bezier(0.1, 1.09, 0.52, 1.26);
}

.minute-hand {
  background: blue;
}

.hour-hand {
  background: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clock</title>
  <link rel="stylesheet" href="clock.css">
</head>

<body>
  <div class="clock">
    <div class="clock-face"></div>
    <div class="hand hour-hand"></div>
    <div class="hand minute-hand"></div>
    <div class="hand second-hand"></div>
  </div>

  <script src="clock.js"></script>

</body>

</html>

CodePen

模拟时钟的指针无法正常工作

Analog Clock's Hands not Working Properly

javascript

html

css

frontend

real-time-clock