Jquery Page Timer

Question

Hey y'all.

Is this possible using jQuery/PHP? I am looking to have my webpage automatically go to a different web page at a certain time of day. For example, i have a 'breakfast' page that is supposed to auto-redirect to the 'Lunch' (www.mylunchpage.com) page at noon. Then the lunch page go to 'Dinner' (www.mydinnerpage.com) page at 5pm. I want it all based on time of day on not on a timer.

Yes, the browser will be open all day...

Any idea on how to make this work? Any advise will be greatly appreciated.

Answer 1

Use setInterval to check the time once every minute. Then use new Date().getHours() to get the current hour. If the hour has changed to the one you want, go to the next page.

You dont need jQuery for this so far. If you want server time instead of client time, you'd have to start by getting the time difference from the server on startup via ajax.

Answer 2

The Javascript function setInterval() can be used to check at certain intervals (every minute, every 5 minutes, etc.) to see what time it is. If the current time hits one of your targets, you redirect.

Something like:

function checkTime()
{
  var date = new Date();
  var hour = date.getHours();
  var min = date.getMinutes();

  if (hour == 12 && min == 0)
    window.location = 'noon.html';
  else if (hour == 17 && min == 0)
    window.location == '5pm.html';
}

$(document).ready(function(){
  setInterval(checkTime, 60000); // This will run checkTime every minute
});

Answer 3

setInterval is a good strategy. I only have to add that navigating to another page is pretty annoying to user. If it is all about the style of the page: better just change CSS dynamically. Will grant better user experience. You can even play with colors and emulate "dusk" and "dawn" changing colors smoothly from red to dark blue.

Drop a comment if you need the example of how to change CSS from JS at the page.