Showing image at certain times of the day

Question

I am trying to show different images during different times of the day. The time should correspond with the user's timezone. It is actually supposed to look like an image is fading away with dawn (now I am just using of cats as example though). The problem I am running into is that when I remove the day variable the whole thing doesn't work. As far as I understand d == 2 equals Tuesday (I derived that information from w3schools and this post here: Answer by Yoshiyahu), though how can I make this work any day of the week? I also tried just adding all the numbers ( d == 01,2,3,4,5,6 ), but that also doesn't seem to work. Here is a snippet with my code. The example should show background image .c during the timeframe between 12:20 and 12:30 on a Tuesday. And background image .b should show during the timeframe between 12:31 and 12:40 on a Tuesday. Am I missing something very obvious? I would really appreciate if someone knows what's wrong.

$(document).ready(function(){
    var n = new Date();
    var h = n.getHours();
  var d = n.getDay();
  var m = n.getMinutes();
    if (d == 2 && h == 12 && m < 30 && m > 20 || d == 2 && h == 12)
      
      document.body.className = "c";
  
    else if (d == 2 && h == 40 && m < 12 && m > 31 || d == 2 && h == 12)
    
      document.body.className = "b";
  
    else

      document.body.className = "a";
});

.a { background: url('https://www.pon-cat.com/application/files/6616/0709/1555/homepage-pon-cat.jpg'); }
.b { background: url('https://d128mjo55rz53e.cloudfront.net/media/images/cat-hunting.2e16d0ba.fill-1000x700.png'); }
.c { background: url('https://www.sciencenews.org/wp-content/uploads/2020/03/033120_HT_covid-cat_feat-800x450.jpg'); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

score 0 · Answer 1 · answered Dec 29 '20 at 12:21

The getHours() method returns the hour (from 0 to 23) of the specified date and time.you have h== 40

$(document).ready(function(){
    var n = new Date();
    var h = n.getHours();
  var d = n.getDay();
  var m = n.getMinutes();
    if (d == 2 && h == 12 && m < 30 && m > 20 || d == 2 && h == 12)
      
      document.body.className = "a";
  
    else if (d == 2 && h == 12 && m < 12 && m > 31 || d == 2 && h == 12)
    
      document.body.className = "b";
  
    else

      document.body.className = "a";
});

.a { background: url('https://www.pon-cat.com/application/files/6616/0709/1555/homepage-pon-cat.jpg'); }
.b { background: url('https://d128mjo55rz53e.cloudfront.net/media/images/cat-hunting.2e16d0ba.fill-1000x700.png'); }
.c { background: url('https://www.sciencenews.org/wp-content/uploads/2020/03/033120_HT_covid-cat_feat-800x450.jpg'); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

$(document).ready(function(){
    var n = new Date();
    var h = n.getHours();
  var d = n.getDay();
  var m = n.getMinutes();
    if (d == 2 && h == 12 && m < 30 && m > 20 || d == 2 && h == 12)
      
      document.body.className = "c";
  
    else if (d == 2 && h == 12 && m < 12 && m > 31 || d == 2 && h == 12)
    
      document.body.className = "b";
  
    else

      document.body.className = "a";
});

.a { background: url('https://www.pon-cat.com/application/files/6616/0709/1555/homepage-pon-cat.jpg'); }
.b { background: url('https://d128mjo55rz53e.cloudfront.net/media/images/cat-hunting.2e16d0ba.fill-1000x700.png'); }
.c { background: url('https://www.sciencenews.org/wp-content/uploads/2020/03/033120_HT_covid-cat_feat-800x450.jpg'); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

score 0 · Accepted Answer · answered Dec 29 '20 at 12:25

The problem seems to come from your conditions. first if you want to make it works every day just remove d variable. and your condition have to look like this:

$(document).ready(function () {
  var n = new Date();
  var h = n.getHours();
  var m = n.getMinutes();
  
  if (h === 12 && m >= 20 && m < 30) document.body.className = "c";
  else if (h === 12 && m > 30 && m < 40) document.body.className = "b";
  else document.body.className = "a";
});

here is a sandbox with all the code

Showing image at certain times of the day

2 Answers2