whadiz.com: What is?
Search Articles:     Home | About | Tools | Contact Us
Games
Board Games
Online Games
Databases
Sql Server
Programming
Visual C# in ASP.Net
JavaScript
Humor
Satire
Web Design
Html

Clever Facts Section

What is JavaScript clock | Automatic JavaScript digital clock | JavaScript clock

What is JavaScript clock?

JavaScript clock demonstrates how to build a digital automated clock using JavaScript. JavaScript clock uses the JavaScript Date() object to determine the current time. The JavaScript method setInterval is used to automate the JavaScript clock

How to implement the JavaScript clock?

This is what the JavaScript clock looks like:

This is what the JavaScipt looks like for the JavaScript clock. Place the following code in the head of your html page:

<script type="text/javascript">
function updateclock() {
    //Get the current time
    var time = new Date();
    var todisplay = '';

    //Add a 0 infront of the hour, minute or second if it is less than 10
    if (time.getHours() < 10) todisplay += '0' + time.getHours();
    else todisplay += time.getHours();

    if (time.getMinutes() < 10) todisplay += ':0' + time.getMinutes();
    else todisplay += ':' + time.getMinutes();

    if (time.getSeconds() < 10) todisplay += ':0' + time.getSeconds();
    else todisplay += ':' + time.getSeconds();

    //Refresh the display
    document.getElementById("clock").innerHTML = todisplay;
}

function startclock() {
    //Initial call otherwise the clock would display blank for the first second
    updateclock();
    //Update the clock every second, i.e. every 1000 milliseconds
    setInterval("updateclock()",1000);
}
</script>

Place a container for the JavaScript clock on the page and start the clock using inline JavaScript. The container can be a textbox, div, span, basically anything. Make sure to then change the line document.getElementById("clock").innerHTML accordingly:

<span id="clock">
    <script type="text/javascript">startclock();</script>
</span>

Where was the JavaScript clock tested?

The JavaScript clock was successfully tested under Internet Explorer 6, Internet Explorer 7, as well as Firefox Version 2.0.0.14.

Link to this article:

Browse some more: Next Article | Next Fact | More JavaScript Articles | More Clever Facts


Copyright © 2021 whadiz.com. All rights reserved.
whadiz.com: What is JavaScript clock | Automatic JavaScript digital clock | JavaScript clock
Home of the answer "what is"