按星期几和一天中的时间显示不同的背景图像

以下是周日和周一的代码。类名是基于你之前拥有的加上0-6天（周日-周六）的代码。如果你愿意，你可以声明一个数组以便于命名，但你不一定需要这样做

对于晚上8点之后的周日，采取的分支将使用class=night0，周一早上6点之后的下午12点是class=day 1…

注意：对于星期一晚上11:59之后的时间，您需要指定星期二n>=0到某个结束时间。注2：我也帮你修复了一些bug。在声明时间范围时，应该使用和（&&），即n>0&amp；n<12表示午夜至上午1159点，n>=12&amp；n<24表示中午至下午11时59分。

使用或（||）可能会引入错误。例如，如果n>0||n<12，则n>0将在12:00am之后始终为真，并且将跳过其他分支。

演示：http://codepen.io/anon/pen/uHgDF

JS:

 $(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...
  }
});

CSS：

/* backgrounds */
.day0 { background:red; }
.sunset0 { background:green; }
.night0 { background:blue; }
/* backgrounds */
.day1 { background:yellow; }
.sunset1 { background:gray; }
.night1 { background:brown; }

你可以这样得到：

(function day(){
//get the hours
  var a = new Date();
  var n = a.getHours();
  if (n > 19 || n < 6){
    var s = "night";
  }
  else if (n > 16 && n < 19){
  
    var s = "sunset";
  }
  else{
    var s = "day";
  }
//get the day
var d = new Date();
var c = d.getDay();
  
var weekday=new Array(7);
weekday[0]="Monday";
weekday[1]="Tuesday";
weekday[2]="Wednesday";
weekday[3]="Thursday";
weekday[4]="Friday";
weekday[5]="Saturday";
weekday[6]="Sunday";
  
alert("Today is "+weekday[c]+" at "+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());
  }