How to refresh page on specific day at specific ti

问题:

I am developing a website that has two back to back web broadcasts. I have used PHP to display the time that the buttons should be enabled and disabled. Now I need to use Javascript to automatically refresh the page before the first broadcast, before the second broadcast and after the second broadcast. I implemented the following script and it does refresh the page at the given time, however, it doesn't work exactly as I need it to. I need to alter the script so that it refreshes the page on Sundays at 7:45pm, 8pm and 8:30pm EST only.

I'm using a modified script from this answered question

function refreshAt(hours, minutes, seconds) {
var now = new Date();
var then = new Date();

if(now.getUTCHours() > hours ||
   (now.getUTCHours() == hours && now.getUTCMinutes() > minutes) ||
    now.getUTCHours() == hours && now.getUTCMinutes() == minutes && now.getUTCSeconds() >= seconds) {
    then.setUTCDate(now.getUTCDate() + 1);
}
then.setUTCHours(hours);
then.setUTCMinutes(minutes);
then.setUTCSeconds(seconds);

var timeout = (then.getTime() - now.getTime());
setTimeout(function() { window.location.reload(true); }, timeout);
}

Then I call the refreshAt() function.

refreshAt(19,45,0); //Will refresh the page at 7:45pm
refreshAt(20,00,0); //Will refresh the page at 8:00pm
refreshAt(20,30,0); //Will refresh the page at 8:30pm

Where I get confused is how to alter this script to only implement the refresh for EST on Sundays.

回答1:

I figured it out. Here's the script:

function refreshAt(hours, minutes, seconds, day) {
    var now = new Date();
    var then = new Date();
    var dayUTC = new Date();

    if(dayUTC.getUTCDay() == day) {

        if(now.getUTCHours() > hours ||
       (now.getUTCHours() == hours && now.getUTCMinutes() > minutes) ||
        now.getUTCHours() == hours && now.getUTCMinutes() == minutes && now.getUTCSeconds() >= seconds) {
        then.setUTCDate(now.getUTCDate() + 1);
        }

    then.setUTCHours(hours);
    then.setUTCMinutes(minutes);
    then.setUTCSeconds(seconds);


    var timeout = (then.getTime() - now.getTime());
    setTimeout(function() { window.location.reload(true); }, timeout);
    }
}

And then I just call the refreshAt() function:

 refreshAt(20,00,0,1); //Will refresh the page at 8:00pm on Monday UTC or 3:00pm EST

回答2:

You can add the test even for the day of the week, for example :

now.getDay() == "Sunday"

回答3:

An alternative approach would be to use Pusher. This keeps an open connection to receiving events.

Include the Pusher javascript:

<script src="http://js.pusher.com/1.11/pusher.min.js"></script>

Bind to a pusher event of "refresh" with this code:

var pusher = new Pusher('abc123'); // Get a key when you sign up and replace this
var refreshChannel = pusher.subscribe('refreshing');
refreshChannel.bind('refresh', function(thing) {
  location.reload(true);
});

Then at 8pm (or whenever you want) manually issue a pusher event on the Pusher control panel page, and all of the people currently viewing the page would be reloaded.

回答4:

function refreshAt(day, hours, minutes, seconds) 
{
    Date.getDay() = day
...
}

0 is Sunday, 6 is Saturday.

回答5:

I had the same problem as you. I'm building a site that sounds a lot like yours, also using PHP to enable and disable page elements before and after the broadcast time. Your solution seemed promising, but ultimately I was dissatisfied using pure Javascript for the page reload. Javascript gets its time from the client's machine, whereas PHP gets it from the server, and even a small difference between the two could wreck the whole system. (i.e. the page could refresh 30 seconds before the PHP enabled the buttons, causing some viewers to assume the whole thing is down.)

I solved the problem by using PHP to tell the Javascript function what time it is, and it works like a charm. The only issue is that it runs every day, instead of just on one day of the week, but that doesn't bother me- users will have no reason to be viewing the page other than the broadcast day.

This is all you need- I put this right after the <body> tag:

<script type="text/javascript">
setTimeout(function() { window.location.reload(true); }, 1000*<?php 
$then = mktime(15,00,0);
$tomorrow = mktime(15, 00, 0, date("m") , date("d")+1);
$now = time(); 
if ($now > $then) {echo $tomorrow - $now;}
else {echo $then - $now;}?>); </script>