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

I'm using the following javascript to display a different image depending on the time of day:

我正在使用以下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

However I need to define the background image by a day of the week as well.

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

So for example on Monday, times between 6am - 12pm show an opening times image and 12pm -6am show a closing time image. Then Tuesday 6am - 4pm show an opening image and 4pm-8am show a closing image. Each day has different opening and closing times. So each day of the week need to be defined in the javascript for this to work.

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

Can anyone help me out?

谁能帮我吗?

I've played around using the following javascript and defined each image and time under each day, but cannot seem to get it working:

我已经玩过使用以下javascript并在每天下定义每个图像和时间,但似乎无法使其工作:

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

Thanks in advance

提前致谢

3 个解决方案

#1

Here's what the code should look like for Sunday and Monday. Class names are based on what you previously had plus the code for the day 0-6 (Sun-Sat). You can declare an array for easier naming if you like, but you don't necessarily need to.

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

For Sunday after 8pm, the branch taken would use class=night0, Monday after 6am-12pm is class=day1...

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

Note: for times after Monday 11:59pm, you need to specify Tuesday n >= 0 to some end time. Note2: I fixed some of your bugs for you as well. When declaring time ranges, you should use and (&&) ie. n>0 && n<12 would denote midnight up to 1159am, n>=12 && n<24 would denote Noon to 1159pm.

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

Using or (||) could introduce bugs. For example, if you have n>0 || n<12, then n>0 will always be true after 12:00am and other branches will be skipped.

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

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

#2

You can get it like this:

你可以这样得到它:

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

#3

I would suggest to create a more flexible structure to keep all the different combinations of openings and closings by day. In this case, as you say that each day of the week need to be defined in the javascript for this to work, I suggest having an array indexed by the day (0 for Sunday, 1 for Monday, 2 for Tuesday, and so on). In each day then you can keep all the backgrounds associated to the corresponding opening and closing hour.

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