Java-Scripts.net

Greeting Clock

More than just a clock. This component acts as a dashboard widget, showing the current time alongside a friendly, time-sensitive welcome message.

Hello

00:00:00

Copy the Script

<div id="clockDisplay"></div>

<script>
function updateClock() {
    var now = new Date();
    var h = now.getHours();
    var m = now.getMinutes();
    var s = now.getSeconds();
    var msg = "Good Morning";

    if (h >= 12) msg = "Good Afternoon";
    if (h >= 18) msg = "Good Evening";

    // Add leading zeros
    m = (m < 10 ? "0" : "") + m;
    s = (s < 10 ? "0" : "") + s;

    document.getElementById("clockDisplay").innerHTML = 
        msg + "! The time is " + h + ":" + m + ":" + s;
}

setInterval(updateClock, 1000);
</script>

Frequently Asked Questions

Auto Greeting runs once on page load. Greeting Clock runs inside a `setInterval`, so if a user stays on the page from 11:59 AM to 12:00 PM, the greeting will automatically switch from 'Morning' to 'Afternoon'.

Yes. The `getHours()` method returns 0-23. You can display it directly for military time or convert it for standard AM/PM time.