How To Make A Simple Digital Clock Using Javascript






digital clock javascript !!!!!
i remember i have written a tutorial on making a clock using javascript before but i know that it was not explained and that codes were not clean so i thought make it again with nice codes . first we need to create a html document to make a the javascript codes work or make the javascript functions work so go ahead and create a new html document and type the regular html tags and under head tag add these codes


<script language="JavaScript">
var clock_id = 0;
function Update_Clock() {
   if(clock_id) {
      clearTimeout(clock_id);
      clock_id  = 0;
   }
   var sDate = new Date();

   document.digital_Clock.theTime.value = ""
                                   + sDate.getHours() + ":"
                                   + sDate.getMinutes() + ":"
                                   + sDate.getSeconds();
   clock_id = setTimeout("Update_Clock()", 1000);
}
function Start_Clock() {
   clock_id = setTimeout("Update_Clock()", 500);
}
function Kill_Clock() {
   if(clock_id) {
      clearTimeout(clock_id);
      clock_id  = 0;
   }
}
</script>

now close the head tag and start the body tag now put these codes there
  <form name="digital_Clock">
   <input name="theTime" size="9" style="text-align: center;" type="text">
</form>

now close the body tag and check your html page boom ! a small digital clock in javascript ! you can also use some awesome css and some other things to make this beautiful !

Share this

Related Posts

Previous
Next Post »