Basic HTML


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


Time - 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=Clock has been declared. The name Clock 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=Clock instruction in almost all opening mark-ups in the same way as it is shown here in the paragraph <p> mark-up below. 
  • Change the "hours+minutes+seconds+ap" text as required to change the format of the clock output.
  • Remove the -12 for a 24 hour clock.
  • ap represents AM or PM for use with 12 hour clock time, you may wish to remove it when using a 24 hour clock.

This sample code is taken from a sample Microsoft help file. It uses the local PC clock to tell the time.

See working sample below.


<p id=Clock> </p>

<script>
<!--
function tick() 
{
    var hours, minutes, seconds, ap;
    var intHours, intMinutes, intSeconds;
    var today;

    today = new Date();

    intHours = today.getHours();
    intMinutes = today.getMinutes();
    intSeconds = today.getSeconds();

    if (intHours == 0)
    {
        hours = "12:";
        ap = "Midnight";
    }
    else if (intHours < 12)
    {
        hours = intHours + ":";
        ap = "A.M.";
    }
    else if (intHours == 12)
    {
        hours = "12:";
        ap = "Noon";
    }
    else
    {
        intHours = intHours - 12
        hours = intHours + ":";
        ap = "P.M.";
    }

    if (intMinutes < 10)
        minutes = "0" + intMinutes + ":";
    else
        minutes = intMinutes + ":";

    if (intSeconds < 10)
        seconds = "0" + intSeconds + " ";
    else
        seconds = intSeconds+" ";

    timeString = hours + minutes + seconds + ap;

    Clock.innerHTML = "<font face='arial' size='6'>" + timeString + "</font>";

    window.setTimeout("tick();", 100);
}

window.onload = tick;
-->
</script>



A Sample Clock is shown below


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

Copyright Bygraph Limited, UK