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
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.