Analog Clock's Hands not Working Properly

Question

Something is wrong in java script section of the code The hour hand is not working properly. It is rotating after every 60 seconds. Also, the minute hand is showing the wrong time. Please check the formula written in js. The formula I have used was also written by gfg. Please explain the necessary changes. Thank you.

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>

Louys Patrice Bessette · Accepted Answer · 2021-08-07T20:40:23.600

The issue about the mispositionned hands was due to the 90 degres rotation needed to show 00:00:00. So in the calculation, you always have to add this 90 degres.

About the calculation itself:
The clock has 360 degres for 12 hours (360/12) and for 60 minutes/seconds (360/60).

To have the hours hand constantly moving beween the hour knotches instead of jumping to it: The hour knotch is (360 * hr) / 12 and the minutes elapsed in this hour is (360 * m) / (12 * 60).
The same concept applies for the minutes hand.

Lastly, the seconds hand was strangely jumping when passing from 59 to 0. That was due to the rotation going from 359 degres to zero instead of going to 360. So in fact the hand was animated backward (counter clockwize) very fast. To fix that, I simply added a line to remove the transition animation when at 0 second.

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

Have a look at .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

Thank you so much. But I still didn't get why you have added 90 degrees ? PLEASE EXPLAIN THAT !! — Diksha, Aug 08 '21 at 06:07
In your original CSS, you have `transform: rotate(90deg);` in the `.hand` rule. That is the page load value to position all hands at 00:00:00 or noon or top of the clock. As soon as you change it programmatically, that setting gets overwritten. Without taking account of that 90 degrees, the zero is at 9 hour or West or at the left of the clock... And has to be at 12 hour or North or at the top of the clock. — Louys Patrice Bessette, Aug 08 '21 at 13:31

Analog Clock's Hands not Working Properly

1 Answers1