Java-Scripts.net

Live Digital Clock

A web design staple. This script captures the system time and formats it into a classic digital watch display that ticks in real-time.

00:00:00

Copy the Script

<div id="clock"></div>

<script>
function showTime() {
    var date = new Date();
    var h = date.getHours(); // 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59
    var session = "AM";
    
    if(h == 0){ h = 12; }
    if(h > 12){
        h = h - 12;
        session = "PM";
    }
    
    // Add leading zero
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;
    
    var time = h + ":" + m + ":" + s + " " + session;
    document.getElementById("clock").innerText = time;
    document.getElementById("clock").textContent = time;
    
    setTimeout(showTime, 1000);
}

showTime();
</script>

Frequently Asked Questions

It uses the `setInterval` function to run the time-checking logic every 1000 milliseconds (1 second).

Yes. The clock outputs text into a standard HTML `div` or `span`. You can use CSS to change the `font-family`, `color`, and `font-size`.

Yes. The script includes logic to convert the 24-hour system time into 12-hour format and append the correct suffix.