Javascript 按星期和时间显示不同的背景图像

我使用以下javascript根据一天中的时间显示不同的图像：

$(document).ready(function(){
var d = new Date();
var n = d.getHours();
if (n > 19 || n < 6)
  // If time is after 7PM or before 6AM, apply night theme to ‘body’
  document.body.className = "night";
else if (n > 16 && n < 19)
  // If time is between 4PM – 7PM sunset theme to ‘body’
   document.body.className = "sunset";
else
   // Else use ‘day’ theme
  document.body.className = "day";
});

---

提前感谢

以下是周日和周一的代码。类名基于您以前拥有的内容以及第0-6天（Sun Sat）的代码。如果愿意，可以声明数组以便于命名，但不一定需要

对于晚上8点之后的星期日，分支将使用class=night0，早上6点到下午12点之后的星期一是class=day1

注意：对于星期一晚上11:59之后的时间，需要将星期二n>=0指定为某个结束时间。 注2：我也为您修复了一些bug。在声明时间范围时，应使用and（&&&）即，n>0&&n=12&&n0 | | n0将在12:00am之后始终为真，并跳过其他分支

演示：

JS:

---

你可以这样得到它：

（功能日）{
//抓紧时间
var a=新日期（）；
var n=a.getHours（）；
如果（n>19 | | n<6）{
var s=“夜间”；
}
否则如果（n>16&&n<19）{
var s=“日落”；
}
否则{
var s=“日”；
}
//得逞
var d=新日期（）；
var c=d.getDay（）；
var weekday=新数组（7）；
工作日[0]=“星期一”；
工作日[1]=“星期二”；
工作日[2]=“星期三”；
工作日[3]=“周四”；
工作日[4]=“周五”；
工作日[5]=“周六”；
工作日[6]=“周日”；
警报（“今天是”+工作日[c]+”在“+s”）；
}());我建议创建一个更灵活的结构，以保持白天所有不同的开放和关闭组合。在本例中，正如您所说，一周中的每一天都需要在javascript中定义，这样才能工作，我建议按天对数组进行索引（0表示星期天，1表示星期一，2表示星期二，依此类推）。在每一天中，您可以保留与相应的开始和结束时间相关的所有背景

  var background = function (d) {
    // All days must be defined in the backgrounds array.
    // You can have as many different opening/closing defined as you need.
    // In case of overlap return the first opening/closing that meets the condition.
    var backgrounds = [
      // Sunday
      [{opening: 0, closing: 5, background: 'night'},
       {opening: 19, closing: 23, background: 'night'}],
      // Monday
      [{opening: 0, closing: 5, background: 'night'},
       {opening: 19, closing: 23, background: 'night'}],
      // Tuesday
      [{opening: 0, closing: 5, background: 'night'},
       {opening: 17, closing: 18, background: 'sunset'},
       {opening: 19, closing: 23, background: 'night'}],
      // Wednesday
      [{opening: 0, closing: 5, background: 'night'},
       {opening: 19, closing: 23, background: 'night'}],
      // Thursday
      [{opening: 0, closing: 5, background: 'night'},
       {opening: 19, closing: 23, background: 'night'}],
      // Friday
      [{opening: 0, closing: 5, background: 'night'},
       {opening: 19, closing: 23, background: 'night'}],
      // Saturday
      [{opening: 0, closing: 5, background: 'night'},
       {opening: 19, closing: 23, background: 'night'}],
    ];
    var day = backgrounds[d.getDay()];
    var hour = d.getHours();

    for (var i = 0; i < day.length; i++) {
      if (day[i].opening <= hour && hour <= day[i].closing) {
        return day[i].background;
      }
    }
    // return day by default.
    return 'day';
  };
  $(document).ready(function(){
    document.body.className = background(new Date());
  }

var background=函数（d）{
//必须在背景数组中定义所有日期。
//您可以根据需要定义任意多个不同的开始/结束。
//如果重叠，返回满足条件的第一个打开/关闭。
变量背景=[
//星期天
[{开始：0，结束：5，背景：“夜晚”}，
{开场：19，结束：23，背景：'晚上'}，
//星期一
[{开始：0，结束：5，背景：“夜晚”}，
{开场：19，结束：23，背景：'晚上'}，
//星期二
[{开始：0，结束：5，背景：“夜晚”}，
{开场：17，结束：18，背景：'日落'}，
{开场：19，结束：23，背景：'晚上'}，
//星期三
[{开始：0，结束：5，背景：“夜晚”}，
{开场：19，结束：23，背景：'晚上'}，
//星期四
[{开始：0，结束：5，背景：“夜晚”}，
{开场：19，结束：23，背景：'晚上'}，
//星期五
[{开始：0，结束：5，背景：“夜晚”}，
{开场：19，结束：23，背景：'晚上'}，
//星期六
[{开始：0，结束：5，背景：“夜晚”}，
{开场：19，结束：23，背景：'晚上'}，
];
var day=backgrounds[d.getDay（）]；
var hour=d.getHours（）；
对于（变量i=0；i如果（day[i]。开放将从周日的0返回到周六的6，因此
days[d.getDay（）]
应该可以做到这一点。嗨，威尔。非常感谢你。这看起来很完美。我现在正在玩它。我会让你知道它的进展：）嗨，威尔。只是想让你知道它非常有效。非常感谢你。如果你愿意帮助我，我还有一件事需要你的帮助。我在这里发布了一个问题，希望你能在这方面帮助我。
 $(document).ready(function(){
    var d = new Date();
    var n = d.getHours();
  var day = d.getDay();

  // change this to test days
   day =0;
  // n =0;

  if (day == 0 ) {
      if (n > 6 && n < 19) {
        // sun 6am - sun 6:59pm
        document.body.className = "day"+day; // night0 for sunday
      }
      else if (n >= 20 && n < 24) {
        // sun 800 - sun 1159pm
        document.body.className = "night"+day;
      }
      else {
        // Else use ‘day’ theme
        document.body.className = "sunset"+day;
      }
  }
  else if ( day == 1 ) {
    // today is monday
      if (n > 6 && n < 12) {
        // Mon 6:00am - Mon 11:59am
        document.body.className = "day"+day; // night1
      }
      else if (n >= 12 && n < 24) {
        // Mon 12pm - 1159pm
        document.body.className = "night"+day;
      }
      else {
        document.body.className = "sunset"+day;
      }
  }  
  else if ( day == 2 ) {
  // etc...
  }
});

/* backgrounds */
.day0 { background:red; }
.sunset0 { background:green; }
.night0 { background:blue; }

/* backgrounds */
.day1 { background:yellow; }
.sunset1 { background:gray; }
.night1 { background:brown; }

  var background = function (d) {
    // All days must be defined in the backgrounds array.
    // You can have as many different opening/closing defined as you need.
    // In case of overlap return the first opening/closing that meets the condition.
    var backgrounds = [
      // Sunday
      [{opening: 0, closing: 5, background: 'night'},
       {opening: 19, closing: 23, background: 'night'}],
      // Monday
      [{opening: 0, closing: 5, background: 'night'},
       {opening: 19, closing: 23, background: 'night'}],
      // Tuesday
      [{opening: 0, closing: 5, background: 'night'},
       {opening: 17, closing: 18, background: 'sunset'},
       {opening: 19, closing: 23, background: 'night'}],
      // Wednesday
      [{opening: 0, closing: 5, background: 'night'},
       {opening: 19, closing: 23, background: 'night'}],
      // Thursday
      [{opening: 0, closing: 5, background: 'night'},
       {opening: 19, closing: 23, background: 'night'}],
      // Friday
      [{opening: 0, closing: 5, background: 'night'},
       {opening: 19, closing: 23, background: 'night'}],
      // Saturday
      [{opening: 0, closing: 5, background: 'night'},
       {opening: 19, closing: 23, background: 'night'}],
    ];
    var day = backgrounds[d.getDay()];
    var hour = d.getHours();

    for (var i = 0; i < day.length; i++) {
      if (day[i].opening <= hour && hour <= day[i].closing) {
        return day[i].background;
      }
    }
    // return day by default.
    return 'day';
  };
  $(document).ready(function(){
    document.body.className = background(new Date());
  }