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
– T.J. Crowder, Commented Jul 7, 2016 at 14:50
Have you tried it? Seems reasonable to me. Echo the comment above me as well. — Tom A
– Tom A, Commented Jul 7, 2016 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
– T.J. Crowder, Commented Jul 7, 2016 at 14:51
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. — James Thorpe
– James Thorpe, Commented Jul 7, 2016 at 14:54

T.J. Crowder · Accepted Answer · 2016-07-07 15:00:43Z

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 7, 2016 at 15:00

answered Jul 7, 2016 at 14:55

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

4 Comments

Richard Hamilton Over a year ago

You usually do not want to use too many conditions in if else statements. That's why I proposed a switch statement

T.J. Crowder Over a year ago

@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 Over a year ago

...and in fact, that use of switch is just if/else by another name and a less-well-known syntax.

Richard Hamilton Over a year ago

Looks like I was wrong here. Anyways, you were a couple of minutes faster than me. So this post should get the nod

Damien · Accepted Answer · 2016-07-07 15:06:06Z

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";}

Richard Hamilton · Accepted Answer · 2016-07-07 14:59:13Z

0

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;
}

answered Jul 7, 2016 at 14:59

Richard Hamilton

26.5k11 gold badges65 silver badges88 bronze badges

1 Comment

T.J. Crowder Over a year ago

Before anyone gives Richard a hard time: Yes, JavaScript's switch really does let you do this. Really. :-)

Collectives™ on Stack Overflow

Change CSS with User Current Time JavaScript

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related