www.hitmill.com
link to hitmill.com home page
Dedicated to helping students learn...

JavaScript Digital Clock Script

Digital Clock Script

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--Hide from old browsers
/*May be used if credited:
http://www.hitmill.com*/
var gizmo;
 
function stopClock(){
  clearTimeout(gizmo);
}
 
function yourClock(){
  var nd = new Date();
  var h, m;
  var s;
  var time = " ";
  h = nd.getHours();
  m = nd.getMinutes();
  s = nd.getSeconds();
  if (h <= 9) h = "0" + h;
  if (m <= 9) m = "0" + m;
  if (s <= 9) s = "0" + s;
  time += h + ":" + m + ":" + s;
  document.the_clock.the_time.value = time;
  gizmo = setTimeout("yourClock()", 1000);
}
Stop hiding -->
</SCRIPT>

</HEAD>
 
<BODY onLoad="yourClock()", onUnload="stopClock(); return true"> This body coding should all be on one line
 
<TABLE CELLPADDING="6" BORDER="0">
  <TR>
    <TD BGCOLOR="#007FFF">
       <FORM NAME="the_clock">
<INPUT TYPE="text" NAME="the_time" SIZE="13">
</FORM>
    </TD>
  </TR>
</TABLE>
 
</BODY>
</HTML>

If you look carefully at the HTML coding in the BODY, above, you will see a form placed into a table cell. I used BGCOLOR in the table cell to put color around the digital clock. Now you can have a customized colored clock just by choosing your own color to use for the BGCOLOR in the table cell. If you want a plain clock without color around it, delete that table coding to expose just the form coding beginning from <FORM> to </FORM>.
Top | Back
Return to the script list

 
webmaster@hitmill.com
 
Updated 14 Dec 2012
© hitmill.com
All Rights Reserved