Thread: analogue clock coding an additional time report

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 java 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>