Automatically load new HTML page at given time

Question

I would like my homepage to change each day at a specific time (1pm).

The page has a 24hr countdown timer and when it reaches zero, I would like a new page to load and the timer starts again.

I understand how to make a page refresh after a particular time

<script>
    setTimeout(function(){
       window.location='Page2.html';
    }, 5000);
</script>

But not how to make this happen at a particular time of the day (1pm).

Is it the page content you wish to change? Does the page content come from a db? — Professor Abronsius, Sep 11 '16 at 07:07
As the site develops, I will build a SQL database, but at present, I design and upload the new page for each day. — Paul Hesketh, Sep 11 '16 at 07:11
Cron jobs won't really help unless he is using web sockets since the server can't push data via http — Dan, Sep 11 '16 at 07:11
I think this [link](http://stackoverflow.com/questions/4455282/call-a-javascript-function-at-a-specific-time-of-day) may help you out. — rcr, Sep 11 '16 at 07:17
If you have 24hr timer coundown, so just call your window.location='Page2.html'; after countdown is 0... There the coundown time came from? is from server or you create is locally? — freethinker, Sep 11 '16 at 07:27

Dan · Answer 1 · 2016-11-17T09:51:45.577

5

You can try using a getting the current time on page load/refresh. Then calc the milliseconds until 1pm. And use that to set your setTimeout. I suggest using a library like moment to do time calculations.

Load moments in your html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script>

In JS:

// time right now
var now = moment.now();
// set refresh hour to 1pm
var nextRefresh = moment.now().hour(13).minute(0).second(0).millisecond(0);

// check if is or after 1pm
if (now.hour >= 13) {
  nextRefresh.add(1, 'days'); // add 1 day
}

setTimeout(function() {
  console.log('next 1pm');
}, nextRefresh.diff(now));

And @Stoycho Trenchev is right. You will probably want to call setInterval with 86400000 ms in the setTimeout. This way, your page will refresh everyday afterwards.

edited Nov 17 '16 at 09:51

answered Sep 11 '16 at 07:13

Dan

506
5
18

I think you just went over OP's head. Also this will get stuck in a endless browser refresh unless your storing nextRefresh in localStorage. – Darkrum Sep 11 '16 at 07:39
Honestly, I think its simpler than using JS date and having logical operators. The code is very readable. Only thing is loading the moment library but that shouldn't be too bad. And good catch on the endless refresh, I flipped the diff order. Answer is updated. – Dan Sep 11 '16 at 07:49
No argument about JavaScript's native time api sucking hard. If it wasn't for moment and their timezone library i would have jumped out a building. – Darkrum Sep 11 '16 at 08:05

score 2 · Answer 2 · answered Sep 11 '16 at 07:15

2

You need setInterval not setTimeout and you need to calculate 24h in milliseconds :)

answered Sep 11 '16 at 07:15

Stoycho Trenchev

557
4
12

I forgot JavaScript runs only in browser so it won't count if user leave the page. What would change the page? Some code? You change the page and people will reload their browser when they enter after the change... – Stoycho Trenchev Sep 11 '16 at 07:33
Incorrect about it only running on the browser. It is everywhere now. – Darkrum Sep 11 '16 at 07:49
I have several node.js websites but in this case is on the browser :) – Stoycho Trenchev Sep 11 '16 at 07:53
Just checking! I hate the ignorant that still believe JavaScript is a browser script kiddie language. – Darkrum Sep 11 '16 at 07:56

Darkrum · Answer 3 · 2016-09-11T07:36:56.487

2

Here you go just a fyi JavaScript uses the browsers time so just because it's 1pm where you are it won't be 1pm where the user is.

var intervalId = window.setInterval(checkTime, 500);

function checkTime() {

    var d = new Date();
    var h = d.getHours();
    var m = d.getMinutes();
    var s = d.getSeconds();

    if(h == 13 && m == 0 && s == 0) return window.location='Page2.html';
}

edited Sep 11 '16 at 07:36

answered Sep 11 '16 at 07:26

Darkrum

1,325
1
10
27

score 1 · Answer 4 · answered Sep 11 '16 at 07:22

1

Ah. Something like?

<script>
    function getTime() {
        var date    = new Date()
        var time    = date.getTime();
        var hours   = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();

        var time    = {'hours': hours, 'minutes': minutes, 'seconds': seconds};
    }

    setInterval(function() {
        var time    = getTime();

        if (time.hours === 13 && time.minutes === 0) {
             window.location = 'Page2.html';
        }
    }, 500);
</script>

answered Sep 11 '16 at 07:22

Achilles Gasper Rasquinha

3,339
1
11
16

Thank you for your help, I will have a play and do some reading of your suggestions. I will see what works best and be in touch. – Paul Hesketh Sep 11 '16 at 07:24
This code will refresh the browser endlessly for 59 seconds – Darkrum Sep 11 '16 at 07:43

score 1 · Answer 5 · answered Sep 11 '16 at 07:23

You'll need setTimeout to set a timer and Date to calculate how long the timer needs to go until it triggers.

var now = new Date();
var millisTill10 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 10, 0, 0, 0) - now;
if (millisTill10 < 0) {
     millisTill10 += 86400000; // it's after 10am, try 10am tomorrow.
}
setTimeout(function(){alert("It's 10am!")}, millisTill10);

Automatically load new HTML page at given time

5 Answers5