Change CSS with User Current Time JavaScript

Question

I want to add change css using current time. this is the Ilustration the code i want.

var today = new Date();
var hourNow = today.getHours();
var style; //add css//

    if (hourNow > 0) { //hour 00:00 - 12:00 the css//
      document.getElementsByTagName('BODY')[0].style.backgroundColor = "#fff";
      document.getElementsByTagName('BODY')[0].style.color= "#505050"; }

    else if (hourNow > 12) { //hour 120:00 - 18:00 the css//
      document.getElementsByTagName('BODY')[0].style.backgroundColor = "gainsboro";
      document.getElementsByTagName('BODY')[0].style.color= "black"; }

    else if (hourNow > 18) { //hour 18:00 - 00:00 the css//
      document.getElementsByTagName('BODY')[0].style.backgroundColor = "#1b1b1b";
      document.getElementsByTagName('BODY')[0].style.color= "#fff"; }

    else {
      document.getElementsByTagName('BODY')[0].style.backgroundColor = "white";
      document.getElementsByTagName('BODY')[0].style.color= "black";}

is that possible? i am new with JavaScript..

Just FYI, `document.getElementsByTagName('BODY')[0]` can be much more simply written as `document.body`. — T.J. Crowder, Jul 07 '16 at 14:50
Have you tried it? Seems reasonable to me. Echo the comment above me as well. — Tom A, Jul 07 '16 at 14:50
You can obviously use any bracing style you want in your own code, but when posting code for others to read, please use something *vaguely* standard and readable. Hiding the `}` at the end of the last line of the block is not vaguely standard or readable (or maintainable). — T.J. Crowder, Jul 07 '16 at 14:51
You could do this using css classes, instead, and set all the required style in different classes. Is there is a lot of style involved that is. — Arathi Sreekumar, Jul 07 '16 at 14:53
Yes, it's certainly possible. However, it looks like unless the hour is past 18, you're always going to fall into the final `else` and set it to black on white. @FastSnail's suggestion of using `else if` would solve that. If that's not the issue with your code, perhaps [this is related](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element). — James Thorpe, Jul 07 '16 at 14:54

T.J. Crowder · Answer 1 · 2016-07-07T15:00:43.923

2

I would do less repeating of myself and use else (listing things in the opposite order), but fundamentally that should have been okay. If I had to do direct style manipulation, I'd do something like this:

var today = new Date();
var hourNow = today.getHours();
var style;

if (hourNow > 18) {
  background = "#1b1b1b";
  color = "#fff";
} else if (hourNow > 12) {
  background = "gainsboro";
  color = "black";
} else if (hourNow > 0) {
  background = "#fff";
  color = "#505050";
}
document.body.style.backgroundColor = background;
document.body.style.color = color;

This is the document body.

...or better use, put the style information in the CSS and add/remove classes.

var today = new Date();
var hourNow = today.getHours();
var style;
var cls;

if (hourNow > 18) {
  cls = "evening";
} else if (hourNow > 12) {
  cls = "afternoon";
} else if (hourNow > 0) {
  cls = "morning";
}
document.body.classList.remove("morning", "afternoon", "evening");
document.body.classList.add(cls);

.morning {
  background-color: #fff;
  color: #505050;
}
.afternoon {
  background-color: gainsboro;
  color: black;
}
.evening {
  background-color: #1b1b1b;
  color: #fff;
}

This is the document body.

edited Jul 07 '16 at 15:00

answered Jul 07 '16 at 14:55

T.J. Crowder

1,031,962
187
1,923
1,875

You usually do not want to use too many conditions in if else statements. That's why I proposed a switch statement – Richard Hamilton Jul 07 '16 at 15:00
2

@RichardHamilton: The above isn't too many conditions in an `if`. `switch` isn't really a good option for ranges of values. (It's *possible*, but not usually what one would reach for.) – T.J. Crowder Jul 07 '16 at 15:01
...and in fact, that use of `switch` is just `if/else` by another name and a less-well-known syntax. – T.J. Crowder Jul 07 '16 at 15:10
Looks like I was wrong here. Anyways, you were a couple of minutes faster than me. So this post should get the nod – Richard Hamilton Jul 07 '16 at 15:15

Damien · Accepted Answer · 2016-07-07T15:06:06.667

Your code will always succeed the first condition, unless it is exactly 0, and in that case it will take the 'default'. I fixed it, use that :

var today = new Date();
var hourNow = today.getHours();
var style; //add css//

if (hourNow >= 18) { //hour 18:00 - 00:00 the css//
  document.getElementsByTagName('BODY')[0].style.backgroundColor = "#1b1b1b";
  document.getElementsByTagName('BODY')[0].style.color= "#fff"; }

else if (hourNow >= 12) { //hour 120:00 - 18:00 the css//
  document.getElementsByTagName('BODY')[0].style.backgroundColor = "gainsboro";
  document.getElementsByTagName('BODY')[0].style.color= "black"; }

else if (hourNow >= 0) { //hour 00:00 - 12:00 the css//
  document.getElementsByTagName('BODY')[0].style.backgroundColor = "#fff";
  document.getElementsByTagName('BODY')[0].style.color= "#505050"; }

else {
  document.getElementsByTagName('BODY')[0].style.backgroundColor = "white";
  document.getElementsByTagName('BODY')[0].style.color= "black";}

score 0 · Answer 3 · answered Jul 07 '16 at 14:59

In this case, I would use a switch statement. Also, instead of setting the style, it might be more efficient to change the class name. Test this out

var today = new Date();
var hourNow = today.getHours();

switch(true) {
    case (hourNow > 0 && hourNow <= 12):
        document.body.className = "morning";
        break;
    case (hourNow > 12 && hourNow <= 18):
        document.body.className = "afternoon";
        break;
    default:
        document.body.className = "evening";
        break;
}

.morning {
  background-color: #fff;
  color: #505050;
}

.afternoon {
  background-color: gainsboro;
  color: black;
}

.evening {
  background-color: #1b1b1b;
  color: #fff;
}

Before anyone gives Richard a hard time: Yes, JavaScript's `switch` really does let you do this. Really. :-) — T.J. Crowder, Jul 07 '16 at 15:06

Change CSS with User Current Time JavaScript

3 Answers3