Click here to Skip to main content
Licence 
First Posted 6 Oct 2004
Views 24,731
Bookmarked 9 times

Clock In JavaScript

By | 6 Oct 2004 | Article
JavaScript clock showing clock for different countries.


//author Kandasamy Mohan

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var timerID ;
function tzone(tz, os, ds, cl)
{
 this.ct = new Date(0) ;  // datetime
 this.tz = tz ;  // code
 this.os = os ;  // GMT offset
 this.ds = ds ;  // has daylight savings
 this.cl = cl ;  // font color
}

function UpdateClocks()
{

    var ct = new Array(

  new tzone('SFO: ', -8, 1, 'red'),

  new tzone('SL: ', +6, 0, 'pink'),

  new tzone('HKG: ', +8, 0,  'silver'),

  new tzone('BKK: ', +7, 0, '#FFAA00'),

  new tzone('NYC: ', -5, 1, '#FFAA00'),

  new tzone('LON: ',  0, 1, 'silver'),

  new tzone('SVO: ', +3, 0, 'pink'),

  new tzone('KTM: ', +5.75, 0, 'red')

 ) ;

 

 var dt = new Date() ; // [GMT] time according to

machine clock

 

 var startDST = new Date(dt.getFullYear(), 3, 1) ;

 while (startDST.getDay() != 0)

  startDST.setDate(startDST.getDate() + 1) ;

 

 var endDST = new Date(dt.getFullYear(), 9, 31) ;

 while (endDST.getDay() != 0)

  endDST.setDate(endDST.getDate() - 1) ;

 

 var ds_active ;  // DS currently active

 if (startDST < dt && dt < endDST)

  ds_active = 1 ;

 else

  ds_active = 0 ;

 

 // Adjust each clock offset if that clock has DS

and in DS.

 for(n=0 ; n<ct.length ; n++)

  if (ct[n].ds == 1 && ds_active == 1)

ct[n].os++ ;

 

 // compensate time zones

 gmdt = new Date() ;

 for (n=0 ; n<ct.length ; n++)

  ct[n].ct = new Date(gmdt.getTime() +

ct[n].os * 3600 * 1000) ;

 

 document.all.Clock0.innerHTML =

  '<font color="' + ct[0].cl + '">' +

ct[0].tz + ClockString(ct[0].ct) + '</font>' ;

 

 document.all.Clock1.innerHTML =

  '<font color="' + ct[1].cl + '">' +

ct[1].tz + ClockString(ct[1].ct) + '</font>' ;

 

 document.all.Clock2.innerHTML =

  '<font color="' + ct[2].cl + '">' +

ct[2].tz + ClockString(ct[2].ct) + '</font>' ;

 

 document.all.Clock3.innerHTML =

  '<font color="' + ct[3].cl + '">' +

ct[3].tz + ClockString(ct[3].ct) + '</font>' ;

 

 document.all.Clock4.innerHTML =

  '<font color="' + ct[4].cl + '">' +

ct[4].tz + ClockString(ct[4].ct) + '</font>' ;

 

 document.all.Clock5.innerHTML =

  '<font color="' + ct[5].cl + '">' +

ct[5].tz + ClockString(ct[5].ct) + '</font>' ;

 

 document.all.Clock6.innerHTML =

  '<font color="' + ct[6].cl + '">' +

ct[6].tz + ClockString(ct[6].ct) + '</font>' ;

 

 document.all.Clock7.innerHTML =

  '<font color="' + ct[7].cl + '">' +

ct[7].tz + ClockString(ct[7].ct) + '</font>' ;

 

 

 timerID = window.setTimeout("UpdateClocks()", 1001)

;

}

 

function ClockString(dt)

{

 var stemp, ampm ;

 

 var dt_year = dt.getUTCFullYear() ;

 var dt_month = dt.getUTCMonth() + 1 ;

 var dt_day = dt.getUTCDate() ;

 var dt_hour = dt.getUTCHours() ;

 var dt_minute = dt.getUTCMinutes() ;

 var dt_second = dt.getUTCSeconds() ;

 

 dt_year = dt_year.toString() ;

 if (0 <= dt_hour && dt_hour < 12)

 {

  ampm = 'AM' ;

  if (dt_hour == 0) dt_hour = 12 ;  

 } else {

  ampm = 'PM' ;

  dt_hour = dt_hour - 12 ;

  if (dt_hour == 0) dt_hour = 12 ;  

 }

 

 if (dt_minute < 10)

  dt_minute = '0' + dt_minute ;

 

 if (dt_second < 10)

  dt_second = '0' + dt_second ;

 

 stemp = dt_month + '/' + dt_day + '/' +

dt_year.substr(2,2) ;

 stemp = stemp + ' ' + dt_hour + ":" + dt_minute +

":" + dt_second + ' ' + ampm ;

 return stemp ;

}

//  End -->

</script>

 

</HEAD>

 

<!-- STEP TWO: Insert the onLoad event handler into your

BODY tag  -->

 

<BODY onLoad="UpdateClocks()">

 

<!-- STEP THREE: Copy this code into the BODY of your HTML

document  -->

 

<table border="0" cellspacing="0" width="100%">

  <tr bgcolor=white style="font-family: Verdana, Tahoma,

Arial; font-size: x-small">

    <td ID="Clock0" width="25%" >   </td>

    <td ID="Clock1" width="25%" >   </td>

    <td ID="Clock2" width="25%" >   </td>

    <td ID="Clock3" width="25%" >   </td>

  </tr>

  <tr bgcolor="white" style="font-family: Verdana, Tahoma,

Arial; font-size: x-small">

    <td ID="Clock4" width="25%" >   </td>

    <td ID="Clock5" width="25%" >   </td>

    <td ID="Clock6" width="25%" >   </td>

    <td ID="Clock7" width="25%" >   </td>

  </tr>

</table>

<!-- Script Size:  4.83 KB -->

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

MohanKandasamy

Web Developer

Sri Lanka Sri Lanka

Member



Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board. (secure sign-in)
 
Search this forum  
 FAQ
    Noise  Layout  Per page   
  Refresh
GeneralFormating needs looking at.... PinmemberDarren_vms22:01 6 Oct '04  

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Mobile
Web04 | 2.5.120517.1 | Last Updated 7 Oct 2004
Article Copyright 2004 by MohanKandasamy
Everything else Copyright © CodeProject, 1999-2012
Terms of Use
Layout: fixed | fluid