Basic HTML


Basic blank page
Meta Codes
Horizontal Lines
Hyperlinks
Images
Marquee
Refresh
Styles
Time - Digital Clock
Time / Date - Clock Face
Countdown Clock / Timer


Countdown - Digital Clock

Copy and paste the clock code into the <body> and </body> markups. Edit the red text as required. 

The script can be located anywhere after the  ID=countdownArea has been declared. The name countdownArea is used here as an example. You can use any name after the ID= as long as you edit the script to match it.

  • You can insert the id=countdownArea instruction in almost all opening mark-ups in the same way as it is shown here in the table <TD> mark-up below. 
  • Edit the date and time that wish to count down to on the line
    var dtsStart = new Date ('25 December 2015 00:00:00 +0000');
  • Change the "sDays + ':' + sHours + ':' + sMinutes + ':' + sSeconds;" text as required to change the format of the clock output.
  • Add a -12 for a 12 hour rather than a 24 hour clock.
  • Change the refresh interval in the line setTimeout("javascript:updateCountdown();",1000);

See working sample below.


<table border="0" cellpadding="0" cellspacing="0">
  <tr><td nowrap> Days until Christmas </td>
  <td nowrap><b id="countdownArea"></b>
  </td></tr>
</table>

<script language="JavaScript" type="text/javascript">

  updateCountdown(); // Calls the function to start it

function updateCountdown()
{
  var dtsStart = new Date ('25 December 2015 00:00:00 +0000');
  var dtsNow = new Date();
  var iSecondsTotal = parseInt((dtsStart.getTime() - dtsNow.getTime())/1000);
  var sOutput = '000:00:00:00'; // output string format

  if (iSecondsTotal > 0)
  {
    var sDays = '000' + String(parseInt(iSecondsTotal/86400));
    iSecondsTotal = iSecondsTotal % 86400;
    var sHours = '00' + String(parseInt(iSecondsTotal/3600));
    iSecondsTotal = iSecondsTotal % 3600;
    var sMinutes = '00' + String(parseInt(iSecondsTotal/60));
    var sSeconds = '00' + String(iSecondsTotal % 60);

    sDays = sDays.substring(sDays.length - 3);
    if(sDays.substring(0,1)=='0')
    {
      sDays = sDays.substring(1);
    }

    sHours = sHours.substring(sHours.length - 2);
    sMinutes = sMinutes.substring(sMinutes.length - 2);
    sSeconds = sSeconds.substring(sSeconds.length - 2);

    sOutput = sDays + ':' + sHours + ':' + sMinutes + ':' + sSeconds;
  }

  document.getElementById('countdownArea').innerHTML = sOutput;
  setTimeout("javascript:updateCountdown();",1000);
}
</script>


A Sample Clock is shown below

Days until Christmas 

You can submit your code fragments to us for publication using the feedback page.

Copyright Bygraph Limited, UK