Question

我使用以下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";
});

http://codepen.io/jamesbarnett/pen/kdDBL

但是我需要在一周中的某一天定义背景图像。

因此，例如在周一，上午6点至下午12点之间的时间显示开放时间图像，下午12点至下午6点显示关闭时间图像。然后周二早上6点到下午4点显示一张开场图像，下午4点到8点显示一张结束图像。每天都有不同的开放和关闭时间。因此，需要在javascript中定义一周中的每一天才能使其正常工作。

任何人都可以帮助我吗？

我已经使用以下javascript玩了并定义了每一天下的每个图片和时间，但似乎无法让它正常工作：

var days = [
'SUN', //Sunday starts at 0
'MON',
'TUE',
'WED',
'THU',
'FRI',
'SAT'
];

提前致谢

Answer 1

以下是周日和周一代码的样子。类名基于您之前的内容以及0-6（周日至周六）的代码。如果您愿意，可以声明一个数组以便于命名，但您并不一定需要。

对于星期日晚上8点以后，分支机构将使用class = night0，星期一早上6点至12点是class = day1 ...

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

使用或（||）可能会引入错误。例如，如果你有n> 0 || n＆lt; 12，然后在上午12:00之后n> 0将始终为真，并且将跳过其他分支。

演示：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; }

Answer 2

你可以这样：

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

Answer 3

我建议创建一个更灵活的结构，以保持白天开口和关闭的所有不同组合。在这种情况下，正如你所说一周中的每一天都需要在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());
  }

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

3 个答案: