js-countdown

Example 1: how much time left to face year 2038 problem

Time left to face year 2038 problem: .

<p>Time left to face year 2038 problem: <span id="countdown"></span>.</p>

var output_target = document.getElementById('countdown'),
    label_builder = Countdown.Helper.Pluralize.label_builder_factory('en'),
    countdown = new Countdown(
      {
        progress: function(seconds) {
          output_target.innerHTML = label_builder(seconds);
        },
        complete: function() {
          output_target.innerHTML = 'Meet "Year 2038 problem"!';
        }
      }
    );

var date_2038_problem = Date.UTC(2038, 1, 19, 3, 14, 7),
    seconds_from_epoch_to_date_2038_problem = Math.floor(date_2038_problem / 1000);

countdown.start_to(seconds_from_epoch_to_date_2038_problem);

Example 2: how much time left to nearest midnight

Time left to nearest midnight: .

<p>Time left to face year 2038 problem: <span id="countdown"></span>.</p>

var output_target = document.getElementById('countdown'),
    label_builder = Countdown.Helper.Pluralize.label_builder_factory('en'),
    countdown = new Countdown(
      {
        progress: function(seconds) {
          output_target.innerHTML = label_builder(seconds);
        },
        complete: function() {
          output_target.innerHTML = 'Meet "Year 2038 problem"!';
        }
      }
    );

var date_2038_problem = Date.UTC(2038, 1, 19, 3, 14, 7),
    seconds_from_epoch_to_date_2038_problem = Math.floor(date_2038_problem / 1000);

countdown.start_to(seconds_from_epoch_to_date_2038_problem);

Example 3: how much time do you spend on this page

How much time do you spend on this page: .

<p>How much time do you spend on this page: <span id="spend-here-countdown"></span>.</p>

var spend_output_target = document.getElementById('spend-here-countdown'),
    spend_label_builder = Countdown.Helper.Pluralize.label_builder_factory('en'),
    spend_countdown = new Countdown(
      {
        progress: function(seconds) {
          spend_output_target.innerHTML = spend_label_builder(seconds);
        }
      }
    );

spend_countdown.start_from();

Example 4: how much time has passed from nearest 9:00 a.m.

How much time has passed from nearest 9:00 a.m.: .

<p>How much time has passed from nearest 9:00 a.m.: <span id="morning-countdown"></span>.</p>

var morning_output_target = document.getElementById('morning-countdown'),
    morning_label_builder = Countdown.Helper.Pluralize.label_builder_factory('en'),
    morning_countdown = new Countdown(
      {
        progress: function(seconds) {
          morning_output_target.innerHTML = morning_label_builder(seconds);
        }
      }
    );

var date = new Date();
date.setHours(9);
date.setMinutes(0);
date.setSeconds(0);
var seconds_from_epoch_to_morning = Math.floor(date.getTime() / 1000);

morning_countdown.start_from(seconds_from_epoch_to_morning);