1

Please understand that the following question is more of an academic one as I am trying to understand the logic behind the issue I am going to describe.

Many times I've seen websites (especially about upcoming movie films) that have a countdown timer. This tells the page visitor about the film's date release in theaters.

My question is how do they code this in order to run even when no one has visited the page? For example JavaScript code works only when the page is loaded. This would make a countdown timer to reset every time. I am really confused how people visit these websites and the countdown timer is already working.

I just need the logic and not some specific coding. Thank you all in advance.

Mdermez
  • 549
  • 5
  • 18
  • 1
    In case of a javascript timer: pass in the target-time on page-load, and count-down to that time -- there is no need for a countdown to be executed every (milli)second in the background; you only need the target-time. – Tom Regner Jul 07 '17 at 11:06
  • 1
    The counter isn't running all the time. When the page loads, there is a variable somewhere which has the date and time that the event is supposed to happen. JavaScript will then look at the current time, compare it to the event time, and calculate the difference. This code is run every second to update the counter. – crazyloonybin Jul 07 '17 at 11:06
  • https://stackoverflow.com/questions/9335140/how-to-countdown-to-a-date – Turnip Jul 07 '17 at 11:07
  • 1
    What do you mean the countdown time gets reset every time? Such a counter runs entirely in the browser and simply uses the difference between the current time and the time it's counting down to. – Lennholm Jul 07 '17 at 11:07
  • 1
    I guess that whenever you enter a page the counter is calculated like this: (date when movie will appear in cinemas) - (current datetime) and the countdown will start from here :) – Alex Lucaci Jul 07 '17 at 11:07

2 Answers2

2

JS counter is running only when user is viewing page. What happens here:

  1. PHP (back-end) has event start time. He calculates how much time is left
  2. Outputting this left time to JS like var timeLeft = "<?php echo getTimeLeft($eventId); ?>";
  3. Now JS just decrements this time with setInterval()

So basically yes, JS counter is reset all time you re-enter page. But it's start time is always different.


There is another option, when you need to do periodical actions without human interaction (e.g. send emails at 00:00 every night for subscribers).

Then we use Cron Job (search for crontab linux). You provide path to file that must be executed and server calls that file when time comes.

Justinas
  • 41,402
  • 5
  • 66
  • 96
2

Here I've made a simple countdown timer, you may take a look and see that there's nothing special, you just need to know the end date and set it. All the rest it is just matter of math ;].

function countDown (endDate) {
  var dateEnd = new Date(endDate); // set future date
  var curDate = new Date(); // set current date
  var diff = dateEnd.getTime() - curDate.getTime(); // get the difference
  var leftSecs = diff/1000;
  var oneMinSecs = 60;
  var oneHourSecs = 60 * oneMinSecs;
  var oneDaySecs = oneHourSecs * 24;

  var estDays = Math.floor(leftSecs/oneDaySecs);
  var estHours = Math.floor((leftSecs - (estDays*oneDaySecs))/oneHourSecs);
  var estMins = Math.floor((leftSecs - ((estDays*oneDaySecs)+(estHours*oneHourSecs)))/60);
  var estSecs = Math.floor(leftSecs - ((estDays*oneDaySecs)+(estHours*oneHourSecs)+(estMins*oneMinSecs)));

  return [estDays, estHours, estMins, estSecs];
}

var timerEl = document.getElementById('timer');

setInterval(function() {
  var est = countDown('07-15-2017');
  timerEl.innerHTML = 'days: ' + est[0] 
  + ' hours: ' + est[1] 
  + ' mins: ' + est[2] 
  + ' sec: ' + est[3] + ' left to 07-15-2017';
}, 1000);
<div id="timer"></div>
Yordan Nikolov
  • 2,598
  • 13
  • 16