Analog Clock in JS shows the wrong hour and minutes-CodePudding

I'm building a JavaScript analog clock, the hands are moving correctly but I don't know why is showing me the wrong hour and minutes. The timezone used in Date is ok but its like the function isn't taking it.

Anyone can help me out finding the error? Sorry for my english, I'm also new in stack overflow :(

const handHour = document.querySelector("#hour");
const handMin = document.querySelector("#minutes");
const handSec = document.querySelector("#seconds");

function getSecondsSinceStartOfDay() {
  const day = new Date();
  var seconds = day.getSeconds();
  var secondsHand = ((seconds / 60) * 360)   90;
  handSec.style.transform = `rotate(${secondsHand}deg)`;
  var minutes = day.getMinutes();
  var minutesHand = ((minutes / 60) * 360)   ((seconds / 60) * 6)   90;
  handMin.style.transform = `rotate(${minutesHand}deg)`;
  var hours = day.getHours();
  var hourshand = ((hours / 12) * 360)   ((minutes / 60) * 30)   90;
  handHour.style.transform = `rotate(${hourshand}deg)`;
}
setInterval(getSecondsSinceStartOfDay, 1000);

#circle {
  background-color: #363646;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 6px solid #938aa9;
  position: relative;
}

#circle .num {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: monospace;
  font-size: 20px;
  color: #dcd7ba;
}

#circle .num1 {
  transform: rotate(30deg);
}

#circle .num2 {
  transform: rotate(60deg);
}

#circle .num3 {
  transform: rotate(90deg);
}

#circle .num4 {
  transform: rotate(120deg);
}

#circle .num5 {
  transform: rotate(150deg);
}

#circle .num6 {
  transform: rotate(180deg);
}

#circle .num7 {
  transform: rotate(210deg);
}

#circle .num8 {
  transform: rotate(240deg);
}

#circle .num9 {
  transform: rotate(270deg);
}

#circle .num10 {
  transform: rotate(300deg);
}

#circle .num11 {
  transform: rotate(330deg);
}

#minutes,
#hour,
#seconds {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: top center;
}

#hour {
  background-color: #e6c384;
  height: 100px;
  width: 8px;
  transform: rotate(125deg);
}

#minutes {
  background-color: #6a9589;
  height: 120px;
  width: 4px;
  transform: rotate(255deg);
}

#seconds {
  background-color: #9cabca;
  height: 127px;
  width: 2px;
}

<div id="circle">
  <div id="hour"></div>
  <div id="minutes"></div>
  <div id="seconds"></div>
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
  <div >8</div>
  <div >9</div>
  <div >10</div>
  <div >11</div>
  <div >12</div>
</div>

Here is the whole project running: https://codepen.io/annierod/pen/rNdvzjR

CodePudding user response：

Your math was off slightly. Instead of adding 90 to the hours, minutes, and seconds you want to add 180.

const handHour = document.querySelector("#hour");
const handMin = document.querySelector("#minutes");
const handSec = document.querySelector("#seconds");

function getSecondsSinceStartOfDay() {
  const day = new Date();
  var seconds = day.getSeconds();
  var secondsHand = ((seconds / 60) * 360)   180;
  handSec.style.transform = `rotate(${secondsHand}deg)`;
  var minutes = day.getMinutes();
  var minutesHand = ((minutes / 60) * 360)   ((seconds / 60) * 6)   180;
  handMin.style.transform = `rotate(${minutesHand}deg)`;
  var hours = day.getHours();
  var hourshand = ((hours / 12) * 360)   ((minutes / 60) * 30)   180;
  handHour.style.transform = `rotate(${hourshand}deg)`;
}
setInterval(getSecondsSinceStartOfDay, 1000);

#circle {
  background-color: #363646;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 6px solid #938aa9;
  position: relative;
}

#circle .num {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: monospace;
  font-size: 20px;
  color: #dcd7ba;
}

#circle .num1 {
  transform: rotate(30deg);
}

#circle .num2 {
  transform: rotate(60deg);
}

#circle .num3 {
  transform: rotate(90deg);
}

#circle .num4 {
  transform: rotate(120deg);
}

#circle .num5 {
  transform: rotate(150deg);
}

#circle .num6 {
  transform: rotate(180deg);
}

#circle .num7 {
  transform: rotate(210deg);
}

#circle .num8 {
  transform: rotate(240deg);
}

#circle .num9 {
  transform: rotate(270deg);
}

#circle .num10 {
  transform: rotate(300deg);
}

#circle .num11 {
  transform: rotate(330deg);
}

#minutes,
#hour,
#seconds {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: top center;
}

#hour {
  background-color: #e6c384;
  height: 100px;
  width: 8px;
  transform: rotate(125deg);
}

#minutes {
  background-color: #6a9589;
  height: 120px;
  width: 4px;
  transform: rotate(255deg);
}

#seconds {
  background-color: #9cabca;
  height: 127px;
  width: 2px;
}

<div id="circle">
  <div id="hour"></div>
  <div id="minutes"></div>
  <div id="seconds"></div>
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
  <div >8</div>
  <div >9</div>
  <div >10</div>
  <div >11</div>
  <div >12</div>
</div>