Clocks 
JavaScript Code for You


Simple JavaScript Clock
24-hour JavaScript Clock
GMT Clock
Clock for Specific Time Zone
 Clock using Images
24-hour Clock using Images
Additional Information
Click on any green divider line to return here.

 

Simple JavaScript Clock


<SCRIPT Language="JavaScript">
<!-- hide from old browsers
function jsClock(){
  var time = new Date()
  var hour = time.getHours()
  var minute = time.getMinutes()
  var second = time.getSeconds()
  var temp = "" + ((hour > 12) ? hour - 12 : hour)
  if(hour==0) temp = "12"
  if(temp.length==1) temp = " " + temp
  temp += ((minute < 10) ? ":0" : ":") + minute
  temp += ((second < 10) ? ":0" : ":") + second
  temp += (hour >= 12) ? " PM" : " AM"
  document.clockForm.digits.value = temp
  id = setTimeout("jsClock()",1000)
  }
//-->
</SCRIPT>
<BODY ONLOAD="jsClock()"> 

<FORM NAME="clockForm">
<FONT face="Courier New,Courier" size=3><B>
<INPUT TYPE="text" NAME="digits" SIZE=11 VALUE="Loading"></B>
</FONT>
</FORM>

 

24-hour JavaScript Clock


<SCRIPT Language="JavaScript">
<!-- hide from old browsers
function jsClock24hr(){
  var time = new Date()
  var hour = time.getHours()
  var minute = time.getMinutes()
  var second = time.getSeconds()
  var temp = "" + ((hour < 10) ? "0" : "") + hour
  temp += ((minute < 10) ? ":0" : ":") + minute
  temp += ((second < 10) ? ":0" : ":") + second
  document.clockForm24hr.digits.value = temp
  id = setTimeout("jsClock24hr()",1000)
  }
//-->
</SCRIPT>
<BODY ONLOAD="jsClock24hr()"> 

<FORM NAME="clockForm24hr">
<FONT face="Courier New,Courier" size=3>
<INPUT TYPE="text" NAME="digits" SIZE=8 VALUE="Loading">
</FONT>
</FORM>

 

GMT Clock

GMT 

<SCRIPT Language="JavaScript">
<!-- hide from old browsers
function jsClockGMT(){
  // Copyright 1999 - 2001 by Ray Stott
  // OK to use if this copyright is included
  // Script available at http://www.crays.com/jsc
   var time = new Date()
   var gmtMS = time.getTime() + (time.getTimezoneOffset() * 60000)
   var gmtTime =  new Date(gmtMS)
   var hour = gmtTime.getHours()
   var minute = gmtTime.getMinutes()
   var second = gmtTime.getSeconds()
   var temp = "" + ((hour < 10) ? "0" : "") + hour
   temp += ((minute < 10) ? ":0" : ":") + minute
   temp += ((second < 10) ? ":0" : ":") + second
   document.clockFormGMT.digits.value = temp
   setTimeout("jsClockGMT()",1000)
   }  
//-->
</SCRIPT>
<BODY ONLOAD="jsClockGMT()"> 

<FORM NAME="clockFormGMT">
<FONT face="Courier New,Courier" size=4>
<INPUT TYPE="text" NAME="digits" SIZE=8 VALUE="Loading">
GMT
</FONT>
</FORM>

 

Clock for Specific Time Zone

Eastern Time in US 

<SCRIPT Language="JavaScript">
<!-- hide from old browsers
function jsClockTimeZone(){
  // Copyright 1999 - 2001 by Ray Stott
  // OK to use if this copyright is included
  // Script available at http://www.crays.com/jsc
  var TimezoneOffset = -5  // adjust for time zone
  var localTime = new Date()
  var ms = localTime.getTime() 
             + (localTime.getTimezoneOffset() * 60000)
             + TimezoneOffset * 3600000
  var time =  new Date(ms) 
  var hour = time.getHours() 
  var minute = time.getMinutes()
  var second = time.getSeconds()
  var temp = "" + ((hour > 12) ? hour - 12 : hour)
  if(hour==0) temp = "12"
  if(temp.length==1) temp = " " + temp
  temp += ((minute < 10) ? ":0" : ":") + minute
  temp += ((second < 10) ? ":0" : ":") + second
  temp += (hour >= 12) ? " PM" : " AM"
  document.clockFormTimeZone.digits.value = temp
  setTimeout("jsClockTimeZone()",1000)
  }
//-->
</SCRIPT>
<BODY ONLOAD="jsClockTimeZone()"> 

<FORM NAME="clockFormTimeZone">
<FONT face="Courier New,Courier" size=4>
<INPUT TYPE="text" NAME="digits" SIZE=11 VALUE="Loading">
US Eastern Time
</FONT>
</FORM>

 

JavaScript Clock Using Images

Requires N3+ or IE4+

  


<SCRIPT Language="JavaScript">
<!-- hide from old browsers
 var imgArray = new Array()
 var setTime = 1 

function initializeImgClock(){
  var i = 0
  for(i=0; i<10; i++){
    imgArray[i] = new Image(20,25)
    }
  imgArray[0].src = "clkimg0.gif"
  imgArray[1].src = "clkimg1.gif"
  imgArray[2].src = "clkimg2.gif"
  imgArray[3].src = "clkimg3.gif"
  imgArray[4].src = "clkimg4.gif"
  imgArray[5].src = "clkimg5.gif"
  imgArray[6].src = "clkimg6.gif"
  imgArray[7].src = "clkimg7.gif"
  imgArray[8].src = "clkimg8.gif"
  imgArray[9].src = "clkimg9.gif"
  jsImgClock24hr()
  }

function jsImgClock(){
  // Copyright 1998 - 2001 by Ray Stott
  // OK to use if this copyright is included
  // Script available at http://www.crays.com/jsc

  var time = new Date()
  var hour = time.getHours()
  var minute = time.getMinutes()
  var second = time.getSeconds()
  var sec = 0
  var sec10 = 0
  var min = 0
  var min10 = 0
  var hr = 0
  var hr10 = 0
   
  sec10 = Math.floor(second/10)
  sec = second - sec10 * 10
  document.imgSec.src = imgArray[sec].src
  if (sec==0  || setTime==1){
    document.imgSec10.src = imgArray[sec10].src
    min10 = Math.floor(minute/10)
    min = minute - min10 * 10
    document.imgMin.src = imgArray[min].src
    if (min==0  || setTime==1){
      document.imgMin10.src = imgArray[min10].src
      if (hour<12){
         document.imgAMPM.src = "clkimgAM.gif"
         if (hour==0)
           hour=12
         }
      else{
         document.imgAMPM.src = "clkimgPM.gif"
         if (hour>12) 
           hour -= 12
         }
    	hr10 = Math.floor(hour/10)
    	hr = hour - hr10 * 10
      document.imgHr.src = imgArray[hr].src
      if (hr10 >= 1)
        document.imgHr10.src = imgArray[hr10].src
      else
        document.imgHr10.src = "clkimgblank.gif"
      setTime = 0
      }
  }   
  id = setTimeout("jsImgClock()",1000)
  }
//-->
</SCRIPT>
<BODY ONLOAD="initializeImgClock()"> 

&nbsp;<IMG SRC="img0.gif" width=20 height=25 name="imgHr10"><IMG 
SRC="clkimg0.gif" width=20 height=25 name="imgHr"><IMG 
SRC="clkimgspc.gif" width=15 height=25 name="imgSpacer1"><IMG 
SRC="clkimg0.gif" width=20 height=25 name="imgMin10"><IMG 
SRC="clkimg0.gif" width=20 height=25 name="imgMin"><IMG 
SRC="clkimgspc.gif"  width=15 height=25 name="imgSpacer2"><IMG 
SRC="clkimg0.gif" width=20 height=25 name="imgSec10"><IMG 
SRC="clkimg0.gif" width=20 height=25 name="imgSec">
<IMG SRC="clkimgAM.gif" width=52 height=25 name="imgAMPM">

 

24-hour JavaScript Clock Using Images

Requires N3+ or IE4+

  


<SCRIPT Language="JavaScript">
<!-- hide from old browsers
 var imgArray = new Array()
 var setTime24 = 1 

function initializeImgClock(){
  var i = 0
  for(i=0; i<10; i++){
    imgArray[i] = new Image(20,25)
    }
  imgArray[0].src = "clkimg0.gif"
  imgArray[1].src = "clkimg1.gif"
  imgArray[2].src = "clkimg2.gif"
  imgArray[3].src = "clkimg3.gif"
  imgArray[4].src = "clkimg4.gif"
  imgArray[5].src = "clkimg5.gif"
  imgArray[6].src = "clkimg6.gif"
  imgArray[7].src = "clkimg7.gif"
  imgArray[8].src = "clkimg8.gif"
  imgArray[9].src = "clkimg9.gif"
  jsImgClock24hr()
  }

function jsImgClock24hr(){
  // Copyright 1998 - 2001 by Ray Stott
  // OK to use if this copyright is included
  // Script available at http://www.crays.com/jsc

  var time = new Date()
  var hour = time.getHours()
  var minute = time.getMinutes()
  var second = time.getSeconds()
  var sec = 0
  var sec10 = 0
  var min = 0
  var min10 = 0
  var hr = 0
  var hr10 = 0
   
  sec10 = Math.floor(second/10)
  sec = second - sec10 * 10
  document.img24Sec.src = imgArray[sec].src
  if (sec==0  || setTime24==1){
    document.img24Sec10.src = imgArray[sec10].src
    min10 = Math.floor(minute/10)
    min = minute - min10 * 10
    document.img24Min.src = imgArray[min].src
    if (min==0  || setTime24==1){
      document.img24Min10.src = imgArray[min10].src
    	hr10 = Math.floor(hour/10)
    	hr = hour - hr10 * 10
      document.img24Hr.src = imgArray[hr].src
      document.img24Hr10.src = imgArray[hr10].src
      setTime24 = 0
      }
    }
   id = setTimeout("jsImgClock24hr()",1000)
   }
//-->
</SCRIPT>
<BODY ONLOAD="initializeImgClock()"> 

<TABLE bgcolor="aqua" BORDER=10 cellpadding=3 cellspacing=3><TR><TD>
&nbsp;<IMG SRC="clkimg0.gif" width=20 height=25 name="img24Hr10"><IMG 
SRC="clkimg0.gif" width=20 height=25 name="img24Hr"><IMG 
SRC="clkimgspc.gif" width=15 height=25 name="imgSpacer1"><IMG 
SRC="clkimg0.gif" width=20 height=25 name="img24Min10"><IMG 
SRC="clkimg0.gif" width=20 height=25 name="img24Min"><IMG 
SRC="clkimgspc.gif"  width=15 height=25 name="imgSpacer2"><IMG 
SRC="clkimg0.gif" width=20 height=25 name="img24Sec10"><IMG 
SRC="clkimg0.gif" width=20 height=25 name="img24Sec">
</TD></TR></TABLE>

 


Additional Information on These Scripts


All of these clocks work by reading your computer time. You can test this by changing the time that is displayed for your computer clock.

The GMT and Clock for Specific Time Zone are unique because the time displayed should be the same on all computers everywhere. The other clocks display your local time.

The Clock for Specific Time Zone is currently set for the eastern time zone of the United States. It can be changed to display the time for any time zone by just changing the value for the variable TimeZoneOffset. It is currently set at -5 which is the offset that the eastern time zone is from GMT. Change this number to whatever the offset is for the zone you want to display (Do not include the "+" if your time zone is ahead of GMT. For example, if you are 3 hours ahead of GMT, the variable should be set at 3, not +3.). You will have to adjust the TimeZoneOffset by 1 hour twice a year if you set this clock for an area that goes to Daylight Savings time.

The 14 images used for the two Image Clocks are displayed below. There are many other images available on the internet that will work for these clocks.

clkimg0.gif clkimg1.gif clkimg2.gif clkimg3.gif clkimg4.gif clkimg5.gif clkimg6.gif clkimg7.gif clkimg8.gif clkimg9.gif

clkimgspc.gif clkimgAM.gif clkimgPM.gif clkimgblank.gif





Date Modified     Scrollers