Free Javascripts - Analog Clock

Analog Clock

In a Nutshell: Using only a few lines of CSS and Javascript, this code snippet is used to display an analog-style clock on your website, complete with hands to represent the current hour, minute and second.

The current time is:

Use it Yourself: First, copy and paste the following CSS code into the <head> section of your HTML, to control the styling of the clock. You can edit this code to change the color of the text, should you wish.

Use it Yourself: Then, Analog Clock requires that the following is added to the <body> section of your page, where appropriate. The DIV tags should appear wherever you want the clock displayed. The SCRIPT elements can appear anywhere in the BODY.

Importantly, change the final line of the SCRIPT section (the "setClock" variable) to the timezone that you wish to display. A full list of IANA timezone formats may be found here.

<div class="clock"> <div class="hand hour-hand"></div> <div class="hand minute-hand"></div> <div class="hand second-hand"></div> </div> <script> // This Script Created by Joshua Smith // For this and 100s of other Free Javascripts, check out: // Free-Javascripts.com @ https://www.free-javascripts.com/ function setClock(timeZone = 'UTC') { const hourHand = document.querySelector('.hour-hand'); const minuteHand = document.querySelector('.minute-hand'); const secondHand = document.querySelector('.second-hand'); // Use Intl.DateTimeFormat to get the current time in a specific timezone const formatter = new Intl.DateTimeFormat('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', timeZone: timeZone, hour12: false }); const timeString = formatter.format(new Date()); const [hours, minutes, seconds] = timeString.split(':').map(num => parseInt(num)); const secondsDegrees = ((seconds / 60) * 360); secondHand.style.transform = `rotate(${secondsDegrees}deg)`; const minutesDegrees = ((minutes + seconds/60) / 60) * 360; minuteHand.style.transform = `rotate(${minutesDegrees}deg)`; const hoursDegrees = ((hours + minutes/60) / 12) * 360; hourHand.style.transform = `rotate(${hoursDegrees}deg)`; } // Set the timezone here setInterval(() => setClock('Australia/Brisbane'), 1000); </script>

This Script Created By: Joshua Smith

Copyright © 1999-2024 Curiosity Cave Pty Ltd. All rights by all media reserved. All elements on this site, including page design, contents and graphics (with the obvious exception of the free Javascripts) may not be reproduced, broadcast, rewritten or redistributed in whole or in part without the expressed written permission of Curiosity Cave Pty Ltd.