Time Message Script

Go beyond basic greetings. This script detects the specific hour of the day and allows you to display highly targeted messages, ensuring your site content remains relevant around the clock.

Live Message Demo

Current Time-Based Message
Loading...

Copy the Code

<!-- Target element for the message -->
<div id="time-message-display"></div>

<script>
(function() {
    var hour = new Date().getHours();
    var msg = "";

    if (hour >= 0 && hour < 6) {
        msg = "Up late? Our night-owl support is here.";
    } else if (hour >= 6 && hour < 12) {
        msg = "Good Morning! Start your day with our top news.";
    } else if (hour >= 12 && hour < 18) {
        msg = "Good Afternoon! Check out our midday deals.";
    } else {
        msg = "Good Evening! Relax with our curated content.";
    }

    document.getElementById("time-message-display").textContent = msg;
})();
</script>

Implementation FAQ

Absolutely. You can set the condition to check for specific hours (e.g., if (hour >= 16 && hour <= 19)) to display a "Happy Hour is Live!" banner.

No. The script runs once upon page load to determine the message, making it extremely lightweight and SEO-friendly.

You can use standard CSS to target the ID time-message-display to change the size, color, and weight of the text.