Display Local Time in HTML using Javascript

The following can display the current time in the visitors timezone using Javascript.



function startClock(){

// local time
document.formLoc.datesLoc.value=getTimeAndDate(13);

// san francisco time: UTF-8
var offsetSfo = -8;
document.formSfo.datesSfo.value=getTimeAndDate(offsetSfo);

// new york time: UTF-5
var offsetJfk = -5;
document.formJfk.datesJfk.value=getTimeAndDate(offsetJfk);

// hawaii time: UTF-10
var offsetHnl = -10;
document.formHnl.datesHnl.value=getTimeAndDate(offsetHnl);

// japan time: UTF+9
var offsetKix = 9;
document.formKix.datesKix.value=getTimeAndDate(offsetKix);

// singapore time: UTF+8
var offsetSin = 8;
document.formSin.datesSin.value=getTimeAndDate(offsetSin);

/* document.write(localTime); */
/* these debug stuff, cause the form outputs NOT to work.
even one of these makes it fail to display
the data in the form! */

setTimeout('startClock()',1000);
}


/*
* returns the formatted time and data
* for local time, set offset to 13
*/

function getTimeAndDate(offset){

var mS;
var time;

// 1. get the local time
var d=new Date();

// getTime() returns mS since 1970.01.01
var localTime = d.getTime();

// 2. find the local time offset
// converting minutes to mS
var localOffset=d.getTimezoneOffset()*60000;

// 3. obtain UTC
var utc = localTime + localOffset;

if((offset<=12)&&(offset>=-12)){
mS = utc + (3600000*offset);// converting mS to hours
time = new Date(mS); // new object
}
else{
time = new Date(); // new object for local
}

var year=time.getFullYear();
var month=time.getMonth();
var day=time.getDay();
var date=time.getDate();
var hour=time.getHours();
var min=time.getMinutes();
var sec=time.getSeconds();
var ampm=" ";
ampm=fixAmpm(hour);
hour=fixHour(hour);
min=fix0(min);
sec=fix0(sec);
date=fix0(date);
day=fixDay(day);
month=month+1;
month=fix0(month);
var time=
(year+"-"+month+"-"+date+" "+day
+" "+hour+":"+min+":"+sec+" "+ampm);
return time;
}
function fixAmpm(h){
if (h>=12){
ap="PM";
}
else{
ap="AM";
}
return ap;
}
function fix0(n){
if(n<10){ n="0"+n; } return n; } function fixHour(h){ if(h>=13){
h-=12;
}
if(h==0){
h=12;
}
if(h<10){ h=fix0(h); } return h; } function fixDay(d){ var dA; switch(d){ case 0: dA="SUN"; break; case 1: dA="MON"; break; case 2: dA="TUE"; break; case 3: dA="WED"; break; case 4: dA="THR"; break; case 5: dA="FRI"; break; case 6: dA="SAT" break; default: dA="error"; } return dA; }
Use it like so:





<div class="rclock">
<div class="rclockn">
<h3>Local Time</h3>
<form name="formLoc">
<input type="text" name="datesLoc" size="28">
</form>
<hr />
</div>
<div class="rclockn">
<h3>Japan</h3>
<form name="formKix">
<input type="text" name="datesKix" size="28">
</form>
<hr />
</div>
<div class="rclockn">
<h3>Singapore, Taiwan, Hong Kong</h3>
<form name="formSin">
<input type="text" name="datesSin" size="28">
</form>
<hr />
</div>
<div class="rclockn">
<h3>New York</h3>
<form name="formJfk">
<input type="text" name="datesJfk" size="28">
</form>
<hr />
</div>
<div class="rclockn">
<h3>San Francisco, San Jose</h3>
<form name="formSfo">
<input type="text" name="datesSfo" size="28">
</form>
<hr />
</div>
<div class="rclockn">
<h3>Hawaii</h3>
<form name="formHnl">
<input type="text" name="datesHnl" size="28">
</form>
<hr />
</div>
</div>
<script type="text/javascript">
startClock();
</script>