JS Countdown

Grab the latest script here:

https://gist.github.com/noahub/f1ee0415dacf9915fa9dcf82b6ef8e12 1.1k

Step 1.

Create a new text element with the default text ‘00 days 00 hrs 00 mins 00 secs’. Style this text to your liking

Step 2.

Double click on this new text box and click ‘view source’. Wrap the innermost text with a new <span> tag with an id="timer". It should should look like:

<span id="timer">00 days 00 hrs 00 mins 00 secs</span>

Step 3.

Copy the Javascript snippet and paste it in your Javascript section with placement ‘Before Body End Tag’

Step 4.

Enter your countdown date.

<script>
  countdown('06/26/2017 8:00 PM', 'timer'); //date format: mm/dd/yyyy hh:mm AM

  function countdown(dt, id)
  {
    var end = new Date(dt);
    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
      var now = new Date();
      var distance = end - now;
      if (distance < 0) {
        clearInterval(timer);
        document.getElementById(id).innerHTML = 'THE DAY HAS ARRIVED!'; //Displays when countdown is complete
        return;
      }
      var days = Math.floor(distance / _day);
      var hours = Math.floor((distance % _day) / _hour);
      var minutes = Math.floor((distance % _hour) / _minute);
      var seconds = Math.floor((distance % _minute) / _second);

      document.getElementById(id).innerHTML = days + ' days ';
      document.getElementById(id).innerHTML += hours + ' hrs ';
      document.getElementById(id).innerHTML += minutes + ' mins ';
      document.getElementById(id).innerHTML += seconds + ' secs';
    }
    timer = setInterval(showRemaining, 1000);
  }
/**
    * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
    * TS:0002-03-083
*/
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *