JavaScript analogue clock code question

[gifted idiot]

Hi all, first time posting here...

I have built this analogue clock (code below) but I can't get my head around how to add an additional hand that displays a 24 hour cycle. I'm pretty sure there isn't provision for both 12 hour and 24 hour hands in javascript but obviously, I could be wrong. If that is the case, is there a crafty way of duplicating the 12 hour call and altering the rotation accordingly?

Thank you all in advance.

<script>

const secondHand = document.querySelector('.second-hand');

const minsHand = document.querySelector('.min-hand');

const hourHand = document.querySelector('.hour-hand');


/*const subHand = document.querySelector('.sub-hand');*/



function setDate() {

 const now = new Date();


 const seconds = now.getSeconds();

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

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


 const mins = now.getMinutes();

 const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;

 minsHand.style.transform = `rotate(${minsDegrees}deg)`;


 const hour = now.getHours();

 const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;

 hourHand.style.transform = `rotate(${hourDegrees}deg)`;

 

}


setInterval(setDate, 1000);


setDate();



</script>

 

[Antero360]

Hi all, first time posting here...

I have built this analogue clock (code below) but I can't get my head around how to add an additional hand that displays a 24 hour cycle. I'm pretty sure there isn't provision for both 12 hour and 24 hour hands in javascript but obviously, I could be wrong. If that is the case, is there a crafty way of duplicating the 12 hour call and altering the rotation accordingly?

Thank you all in advance.

<script>

const secondHand = document.querySelector('.second-hand');

const minsHand = document.querySelector('.min-hand');

const hourHand = document.querySelector('.hour-hand');


/*const subHand = document.querySelector('.sub-hand');*/



function setDate() {

 const now = new Date();


 const seconds = now.getSeconds();

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

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


 const mins = now.getMinutes();

 const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;

 minsHand.style.transform = `rotate(${minsDegrees}deg)`;


 const hour = now.getHours();

 const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;

 hourHand.style.transform = `rotate(${hourDegrees}deg)`;

 

}


setInterval(setDate, 1000);


setDate();



</script>

Hi there,
So I have question: I know you mentioned "hand", but don't think got whether or not you wanted to add the hand in the clock you have already established, or create a new clock?

 

[gifted idiot]

Hi Antero360,
I'm trying to create an analogue style clock that has the standard hours, mins, secs, centered in the middle, with an additional 24 hour sub-dial hand at the 6 o'clock position. CSS is taking care of the hands but I'm stuck trying to add the 24 hour javascript.

Hope that helps!