Display local time with JavaScript
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.