jQuery, how do I check a time range?

Question

Hi all,

I want to display 3 different background images according to the time of the day: one for morning from 4am to 12am one for afternoon from 12am to 6pm and one for the night from 6pm to 4pm. Im using the json server to get the time zone etc... I tried this but doesn't work properly:

$(document).ready(function(){
      var timezone = "Europe/London";
      $.getJSON("http://json-time.appspot.com/time.json?tz="+timezone+"&callback=?",
        function(data){
           if ((data.hour > 4) && (data.hour < 12)) {
              $('body').css("background-image", "url('dawn.jpg')").css('background-repeat', 'no-repeat');
          } 
          else if ((data.hour < 4) && (data.hour > 18)){
            $('body').css("background-image", "url('night.jpg')").css('background-repeat', 'no-repeat');
          }
          else if ((data.hour > 12) && (data.hour < 18)){
            $('body').css("background-image", "url('afternoon.jpg')").css('background-repeat', 'no-repeat');
          }

        });
      });

I should have something that checks the range between the times, but I don't know how to do it.

Any solution?

Thanks a lot :)

Answer 1

The only problem I see with your code is that you should in some cases use <= and >= rather than < and >. The hours starting with 4, 12, 18 aren't covered.