如果时间在晚上 7 点到早上 7 点之间，Javascript 会执行此操作吗？

Question

我想要一个 javascript 文件来检查当前时间是否在晚上 7 点到早上 7 点之间。如果是这样，它应该将我网站上的背景颜色更改为 X。 如果当前时间不在晚上 7 点到上午 7 点之间，则背景颜色应为 Y。 由于我是 Javascript 新手，所以我并不了解所有内容，这就是为什么我需要您的帮助！

Answer 1

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

参见小提琴。

Answer 2

我建议在主体上使用类来管理样式，但在 JavaScript 中处理类。

本质上，您将使用 Date 类来获取军事时间中的当前时间（24 小时）。晚上 7 点在军事时间中表示为 19。

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

然后在 CSS 中你可以处理这些类。

body.between7 {
    background-color: green;
}

body.notBetween7 {
    background-color: red;
}

Answer 3

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

Answer 4

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
}

Answer 5

这可能对你有帮助：

 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
          }

  }

Answer 6

这个解决方案也适用于午夜：

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

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

Answer 7

你必须将它包装在

DOMContentLoaded

事件中，以便它在 CSS 和图像等之前触发......

当初始 HTML 文档已加载时，会触发 DOMContentLoaded 事件 已完全加载和解析，无需等待样式表， 图像和子帧完成加载

参考：https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

事件监听器：

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