WordPress Code Snippets

A fresh mix of code snippets and tutorials

Display local time with JavaScript

72

Another oldie but goodie, here is a chunk of JavaScript code that will display local time in a variety of formats.

To understand how this works, create a blank HTML file and add the following slab of code:

<script type="text/javascript">
// Local Time script © Dynamic Drive (http://www.dynamicdrive.com)

var weekdaystxt=["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"]

function showLocalTime(container, servermode, offsetMinutes, displayversion){
	if (!document.getElementById || !document.getElementById(container)) return
	this.container=document.getElementById(container)
	this.displayversion=displayversion
	var servertimestring=(servermode=="server-php")? '<? print date("F d, Y H:i:s", time())?>' : (servermode=="server-ssi")? 'April 10, 2007 12:25:56' : '<%= Now() %>'
	this.localtime=this.serverdate=new Date(servertimestring)
	this.localtime.setTime(this.serverdate.getTime()+offsetMinutes*60*1000) //add user offset to server time
	this.updateTime()
	this.updateContainer()
}

showLocalTime.prototype.updateTime=function(){
	var thisobj=this
	this.localtime.setSeconds(this.localtime.getSeconds()+1)
	setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

showLocalTime.prototype.updateContainer=function(){
	var thisobj=this
	if (this.displayversion=="long")
		this.container.innerHTML=this.localtime.toLocaleString()
	else{
		var hour=this.localtime.getHours()
		var minutes=this.localtime.getMinutes()
		var seconds=this.localtime.getSeconds()
		var ampm=(hour>=12)? "PM" : "AM"
		var dayofweek=weekdaystxt[this.localtime.getDay()]
		this.container.innerHTML=formatField(hour, 1)+":"+formatField(minutes)+":"+formatField(seconds)+" "+ampm+" ("+dayofweek+")"
	}
	setTimeout(function(){thisobj.updateContainer()}, 1000) //update container every second
}

function formatField(num, isHour){
	if (typeof isHour!="undefined"){ //if this is the hour field
		var hour=(num>12)? num-12 : num
		return (hour==0)? 12 : hour
	}
	return (num<=9)? "0"+num : num//if this is minute or sec field
}
</script>

<div class="bigbox"><b>Server Time:</b> <span id="timebox">12:26:09 PM (Tues)</span></div>
<div class="bigbox"><b>Paris:</b> <span id="timebox2">10:26:09 PM (Tues)</span></div>
<div class="bigbox"><b>New York:</b> <span id="timebox3">4:26:09 PM (Tues)</span></div>
<div class="bigbox"><b>Tokyo:</b> <span id="timebox4">6:26:09 AM (Wed)</span></div>

<script type="text/javascript">
	new showLocalTime("timebox", "server-ssi", 0, "short")
	new showLocalTime("timebox2", "server-ssi", 600, "short")
	new showLocalTime("timebox3", "server-ssi", 240, "short")
	new showLocalTime("timebox4", "server-ssi", 1080, "short")
</script>

<ol>
	<li><b>ContainerID</b> (string): ID of the DIV/span.</li>
	<li><b>Servermode</b> (string): "server-php", PHP.</li>
	<li><b>LocaltimeoffsetMinutes</b> (integer): offset in minutes.</li>
	<li><b>Display Format</b> (string): "short" or "long" (time + date).</li>
</ol>

Once included in your HTML file, visit it in a browser to see a nice assortment of “local time” output.

Source


Show Support

Like our new Facebook Page to show support!