JavaScript: Show & Tick a Specific Local Time Clock (Fixed Time Zone) instead of Client Time

• Tweet

• Tweet

When I’m coding for a new sub site where I need to show the local time of mine and my developers’ wherever the visitors are. Things get a little bit more tricky.

Time basics in JavaScript and PHP

To offset time zone differences in calculation, both JavaScript and PHP specs have time stamps representing the time that has elapsed from the Epoch of Linux (Jan 1st, 1970, 00:00:00 GMT) — the ground zero.

However, PHP goes with seconds while JavaScript goes with milliseconds. You need to multiply 1000 to the value returned by time() in PHP to use in Date.setTime() with JavaScript or divide by 1000 in the other way around with Date.getTime() and date().

The solution

To achieve what we are aiming for, that is, to display a chosen local time in any specific time zone (such as you, the developer’s) in any visitors’ browser no matter what the time zone he or she’s based, you have 2 options.

The 1st is to get the time of your server by PHP and inject into client side javascript, converting it to GMT time and adding the offset thus transforming the time to that of your time zone.

The 2nd is simpler, in that no PHP is involved which also incurs the risk of the client time not being accurate. It’s rare though, and as the project is not that much a time critical one, we’ll take this route.

JavaScript on-page ticking clock of your own time rather than visitor’s

The HTML:

<span id="date"></span>
<span id="day"></span>
<span id="clock"></span>

The JavaScript:

function updateClock() {

	var clientTime = new Date();
	var currentTime = new Date();
	var timeOffset = 8 * 60 * 60 * 1000;
	currentTime.setTime(clientTime.getTime() + timeOffset);

	var currentHours = currentTime.getUTCHours();
	var currentMinutes = currentTime.getUTCMinutes();
	var currentSeconds = currentTime.getUTCSeconds();
	var currentMonth = currentTime.getUTCMonth();
	var currentDate = currentTime.getUTCDate();
	var currentDay = currentTime.getUTCDay();
	
	switch(currentMonth) {
		case 0:currentMonth = 'Jan';break;
		case 1:currentMonth = 'Feb';break;
		case 2:currentMonth = 'Mar';break;
		case 3:currentMonth = 'Apr';break;
		case 4:currentMonth = 'May';break;
		case 5:currentMonth = 'June';break;
		case 6:currentMonth = 'July';break;
		case 7:currentMonth = 'Aug';break;
		case 8:currentMonth = 'Sep';break;
		case 9:currentMonth = 'Oct';break;
		case 10:currentMonth = 'Nov';break;
		case 11:currentMonth = 'Dec';break;
	}
	
	switch(currentDay) {
		case 0:currentDay = 'Sunday';break;
		case 1:currentDay = 'Monday';break;
		case 2:currentDay = 'Tuesday';break;
		case 3:currentDay = 'Wednesday';break;
		case 4:currentDay = 'Thursday';break;
		case 5:currentDay = 'Friday';break;
		case 6:currentDay = 'Saturday';break;
	}
	
	currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
	currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;

	document.getElementById("clock").innerHTML = currentHours + ":" + currentMinutes + ":" + currentSeconds;
	document.getElementById("date").setAttribute('class', currentMonth);
	document.getElementById("date").innerHTML = currentDate;
	document.getElementById("day").innerHTML = currentDay;
}

window.onload = function() {
	updateClock();
	setInterval(updateClock, 1000);
}

In the JavaScript code above, highlighted in navy blue is what matters. currentTime, your local time to be displayed, is got by adding an offset of timeOffset to clientTime.getTime(), the GMT time stamp. I’m living in time zone GMT +8, therefore var timeOffset = 8 * 60 * 60 * 1000. Just modify it according to your time zone.

Also you have to use UTC methods to get time parts or the browser would automatically convert the time stamp into visitor’s local time.