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

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
    //Update the clock every second, i.e. every 1000 milliseconds

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>

Where was the JavaScript clock tested?

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

Link to this article:

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

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