Oct 4, 2020

Running Clock using Java Script

Creating a running clock for local and any specified time zone using pure Java Script (JS)

This is a simple example of creating running clock for any time zone. You don't need any type of class and plugin to develop this clock. Simply save this piece of code in .HTML format and run it in a browser.

Sample Code:

<div id="indian"></div> // HTML element to display clock

<div id="france"></div> // HTML element to display clock

<script>

// Functions to create clock for Indian time zone

function startIndianTime() { 

var indian = new Date(); 

var h=indian.getHours(); 

var m=indian.getMinutes(); 

var s=indian.getSeconds(); 

m=checkTime(m);

s=checkTime(s);

// Set time on HTML element by element ID

document.getElementById('indian').innerHTML="Indian Time: "+ h+":"+m+":"+s; 

t=setTimeout(function(){startIndianTime()},500); 

}

// Function to create clock for any timezone

function startTimeWithZone(timeZone="Europe/Paris") { 

var dif=new Date().toLocaleString("en-US", {timeZone: timeZone}); // Get date with time zone

var today = new Date(dif); 

var h=today.getHours(); 

var m=today.getMinutes(); 

var s=today.getSeconds(); 

m=checkTime(m);

s=checkTime(s); 

// Set time on HTML element by element ID

document.getElementById('france').innerHTML="France Time: "+ h+":"+m+":"+s; 

t=setTimeout(function(){startTimeWithZone()},500); 

function checkTime(i) { if (i<10) { i="0" + i; } return i; } 

startIndianTime(); // Function call

startTimeWithZone(); // Function call

</script>

Output:



No comments:

Post a Comment