Home > JavaScript > Adding a Digital Clock on Your Web Page

Adding a Digital Clock on Your Web Page

September 5th, 2008 programming Leave a comment Go to comments

This javascript allows you to display a digital clock on your web page. This clock can be put in the body area (in a HTML element), status bar or the browser title.

Platform

This script can be run well using Mozilla Firefox (any version), Internet Explorer (any version), Opera and Fast Browser.

Source Code


[html]<script language="javascript">
// By : Isusx Programming Corner
// URL : http://isusx.com
function start_clock() {
dt = new Date;

dt_hh = dt.getHours();
if(dt_hh.toString().length == 1)
dt_hh = "0" + dt_hh;

dt_mm = dt.getMinutes();
if(dt_mm.toString().length == 1)
dt_mm = "0" + dt_mm;

dt_ss = dt.getSeconds();
if(dt_ss.toString().length == 1)
dt_ss = "0" + dt_ss;

dt_str = dt_hh + ":" + dt_mm + ":" + dt_ss;

//Displaying the digital clock
//Choose one of these three options

//First option - diplay it in the browser title
document.title = dt_str;
//End of first option

//Second option - diplay it in the status bar
window.status = dt_str;
//End of second option

//Second option - diplay it in a HTML element
element_id.value = dt_str;
//End of second option

setTimeout("start_clock()",1000);
}
</script>
<body onload="start_clock()">
<input type="text" size="15" id="element_id">
</body>[/html]

Copyright Note

This script is free to use but please do not remove the comment in the script.

Related Links

Javascript Source
About HTML element
About JavaScript

If you like this code/script, perhaps you would kindly treat me a drink. Any number is welcome. Thanks :)

Related Article

Categories: JavaScript Tags: , , , , , , , , , ,
  1. Jørgen Helgheim
    November 20th, 2008 at 16:35 | #1
    Reply | Quote

    Thanks for this script. I needed to extend your digital clock with a format input. And I want to share it with you!

    // By : CodeCentre
    // URL : http://codecentre.co.cc
    function start_clock(format) {
    dt = new Date;

    dt_hh = dt.getHours();
    if(dt_hh.toString().length == 1)
    dt_hh = “0″ + dt_hh;

    dt_mm = dt.getMinutes();
    if(dt_mm.toString().length == 1)
    dt_mm = “0″ + dt_mm;

    dt_ss = dt.getSeconds();
    if(dt_ss.toString().length == 1)
    dt_ss = “0″ + dt_ss;

    //dt_str = dt_hh + “:” + dt_mm + “:” + dt_ss;
    dt_str = format;
    dt_str = dt_str.replace(’hh’, dt_hh);
    dt_str = dt_str.replace(’mm’, dt_mm);
    dt_str = dt_str.replace(’ss’, dt_ss);

    //Displaying the digital clock
    //Choose one of these three options

    //First option - diplay it in the browser title
    document.title = dt_str;
    //End of first option

    //Second option - diplay it in the status bar
    window.status = dt_str;
    //End of second option

    //Second option - diplay it in a HTML element
    document.getElementById(’clock’).innerText = dt_str;
    //End of second option
    var metodCall = “start_clock(’”+format+”‘)”;

    setTimeout(metodCall,1000);
    }

  2. admin
    November 20th, 2008 at 23:48 | #2
    Reply | Quote

    @Jørgen Helgheim
    >> Thanks, you have did a good job.

  1. No trackbacks yet.