How to change CSS according time with JavaScript

Question

Is there a way to change the background-color property, or any CSS property depending on a specific time (clock) of the day?

For example: For (9:00 - 12:00) the background color should be green, from 12:00 - 15:00 red and so on and so forth. I don't know if it's possible just with javascript or php. I've played around with some time intervals, but intervals reset each time I refresh the page.

Note: Say I open the page on 9:00 (I see a green background) and I close it. If I open it again on 11:00 the page should still be green.

Here's my HTML

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <style>
            .timeDep {
                width:200px;
                height:200px;
                background-color: #eee;
                margin: 50px auto 0 auto;
            }
        </style>
</head>
<body>
    <script>
        $(function(){
                //Code
            });
    </script>

    <div class='timeDep'></div>
</body>
</html>

Any thoughts?

Thanks in advance!

try with js , it's easy

user4520208
– user4520208

2016-07-21 01:56:34 +00:00
Commented Jul 21, 2016 at 1:56 — user4520208
– user4520208, Commented Jul 21, 2016 at 1:56
Just figured this out!!!! :D

incalite
– incalite

2016-07-21 01:58:43 +00:00
Commented Jul 21, 2016 at 1:58 — incalite
– incalite, Commented Jul 21, 2016 at 1:58

Bijan · Accepted Answer · 2016-07-21 01:56:15Z

1

Javascript would be a simple solution for this. Just need to get the current hour and set the background color based on the time.

var d = new Date();
var currHour = d.getHours();
if (currHour >= 9 && currHour <= 12) {
    document.body.style.backgroundColor = "green";
} else if (currHour > 12 && currHour < 17) {
    document.body.style.backgroundColor = "red";
}

answered Jul 21, 2016 at 1:56

Bijan

8,82622 gold badges107 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

incalite Over a year ago

Just figured this out. Pretty much is the same as you did!! Thank you for your quick response! :D

incalite Over a year ago

I did my friend! Thanks again!

Collectives™ on Stack Overflow

How to change CSS according time with JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related