Java-Scripts.net

Time Based Greeting (Advanced)

Create an immersive environment. This script checks the time of day and updates the visual theme of the container to match the user's reality.

Checking Time...

Theme adjusting automatically.

Copy the Script

<script>
var h = new Date().getHours();
var body = document.body;

if (h < 12) {
    body.style.backgroundColor = "#FFFAE3"; // Morning Light
    document.write("Good Morning");
} else if (h < 18) {
    body.style.backgroundColor = "#E3F2FD"; // Afternoon Blue
    document.write("Good Afternoon");
} else {
    body.style.backgroundColor = "#1A237E"; // Night Blue
    body.style.color = "white";
    document.write("Good Evening");
}
</script>

Frequently Asked Questions

Yes. Instead of `style.backgroundColor`, set `style.backgroundImage = 'url(night.jpg)'` in the logic blocks.

Yes. The cleanest way is to add a class like `.morning` or `.night` to the `` tag and handle the styling in your CSS file.

This script defines Night as 8 PM (20:00) onwards, but you can easily adjust the `if (hour > 20)` condition to fit your preference.