CODEWITHSUNDEEP
javascriptif-statementtimeaction
Yanlu
Yanlu

Reputation: 335

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

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!

Upvotes: 23

Views: 58773

Answers (8)

deanqx
deanqx

Reputation: 125

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

Upvotes: 0

Escape75
Escape75

Reputation: 300

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

Upvotes: 0

Fourat
Fourat

Reputation: 2447

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

Upvotes: -1

Naveen Kumar Alone
Naveen Kumar Alone

Reputation: 7668

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

Upvotes: 4

Austin Brunkhorst
Austin Brunkhorst

Reputation: 21130

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

Upvotes: 4

Butani Vijay
Butani Vijay

Reputation: 4239

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
          }

  }

Upvotes: 0

Nev
Nev

Reputation: 1568

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

See fiddle.

Upvotes: 42

Spencer
Spencer

Reputation: 1522

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
}

Upvotes: 0

Related Questions