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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<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.
Show Support
Like our new Facebook Page to show support!