Javascript if time is between 7pm and 7am do this?

Question

I want to have a javascript file which checks if current time is between 7pm and 7am. If so it should change the background color on my website to X. If the current time is not between 7pm and 7am the background color should be Y. Since I am new to Javascript I do not know everything, and that's why I need your help!

Acrefoot

new Date().getHours() and compare in 24h. – Ar

possible duplicate of Between 11pm and 7am in Javascript – Acorn

Answer 1

var today = new Date().getHours();
if (today >= 7 && today <= 19) {
   document.body.style.background = "Red";
} else {
    document.body.style.background = "Blue";
}

See fiddle.

Inject

How would the function work? If I have to call multiple times, a function is more suitable. – Auerbach

Answer 2

Here is JSBin

var currentTime = new Date().getHours();
if (currentTime >= 19 && currentTime <= 7) {
   document.body.style.background = "/*your X color*/";
} else {
    document.body.style.background = "/*your Y color*/";
}

Thermolysis

Answer 3

I suggest using a class on the body to manage the style, but handle the classes in JavaScript.

Essentially you'll use the Date class to get the current hour in military time (24 hour). 7 PM is represented as 19 in military time.

var hour = new Date().getHours();

// between 7 PM and 7 AM respectively
if(hour >= 19 || hour <= 7) {
    document.body.className += 'between7';
} else {
    document.body.className += 'notBetween7';
}

Then in CSS you can handle those classes.

body.between7 {
    background-color: green;
}

body.notBetween7 {
    background-color: red;
}

Rondeau

Maybe because the question asks for time between "7pm and 7am", not the other way round. Who knows. I see that you commented everywhere that they compare the values wrongly but in fact you are the one who made the mistake. – Acorn

Answer 4

This may be help you :

 function checkTime() {
        var d = new Date(); // current time
        var hours = d.getHours();
        var mins = d.getMinutes();
         if(hours>=19 || hours <=7)
          {
              document.body.style.background="";//set background color x
          }
          else
          {
               document.body.style.background="";//set background color y
          }

  }

Ardell

Answer 5

var d = new Date();
var n = d.getHours(); //get the current local time's hour in military time (1..23)

//If the time is greater than or equal to 7pm or less than or equal to 7am
if (n >= 19 || n <= 7) { 
   //set background color to X
}
else {
   //set background color to Y
}

Circumfluent

My misunderstanding - I read the question as between AM and PM, not PM and AM. Sorry about that. – Rondeau

Answer 6

This solution works over midnight too:

function isBetweenTime(from, hour, to) {
  return from == to;

  if (from > to) {
    return hour >= from || hour < to;
  } else {
    return hour >= from && hour < to;
  }
}

Linguistics

isBetweenTime(19,20,7) = false, or isBetweenTime(19,20,19) = true,- See my solution that works. – Andrey

Answer 7

Fairly generic way to handle the problem ...

var inBetween = function(from, hour, to)
{
    if (from < to) return (hour >= from && hour < to);
    if (from > to) return !(hour >= to && hour < from);
    return !(from == to);
}

if (inBetween(19, (new Date()).getHours(), 7)) 
    document.body.style.background = "Red";
else
    document.body.style.background = "Blue";

Andrey

Answer 8

You have to wrap it in DOMContentLoaded event so it's fired before CSS and images etc...

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading

Ref : https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Event listener :

document.addEventListener("DOMContentLoaded", function(event) {
    var currentHour = new Date().getHours();
    var themeClassName = (currentHour >= 19 || currentHour <= 7) ? "night-class-name" : "day-class-name";
    document.body.className += themeClassName
});

Array