JavaScript Digital Clock

www.hitmill.com

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