Countdown Timer

Question

I can't get the following code to work on the frontend. It displays correctly but will not countdown as I would like. I have tried changing the date but nothing happens. Could someone point me in the right direction? Thanks

<p>
<script type="text/javascript">
// <![CDATA[
var end = new Date("06/22/2016 ");
    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {   
        var end = new Date("06/22/2016");
        var now = new Date();
        var distance = end - now;
        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('coupon_days').innerHTML = '<span>'+days+'D&nbsp;</span>';
        document.getElementById('coupon_hours').innerHTML = '<span>'+hours+'H&nbsp;</span>';
        document.getElementById('coupon_minutes').innerHTML = '<span>'+minutes+'M&nbsp;</span>';
        document.getElementById('coupon_seconds').innerHTML = '<span>'+seconds+'S&nbsp;</span>';
    }
    timer = setInterval(showRemaining, 1000);
// ]]>
</script>
</p>

<div class="order_line_content">
    <p>Order Before <strong><span style="color: #ff99cc;">1D-<span id="coupon_hours">1H-</span><span id="coupon_minutes">40M-</span></span></strong><span id="coupon_seconds"><span><strong><span style="color: #ff99cc;">2S</span></strong>&nbsp;</span></span><span id="coupon_seconds">to go</span> To Get Upto 20% off.</p>
</div>

Answer 1

You can use below script if you want. I have used it before https://jsfiddle.net/cbdgmzr1/2/

<div id="countdown">
    <p class="days">00</p>
    <p class="timeRefDays">days</p>
    <p class="hours">00</p>
    <p class="timeRefHours">hours</p>
    <p class="minutes">00</p>
    <p class="timeRefMinutes">minutes</p>
    <p class="seconds">00</p>
    <p class="timeRefSeconds">seconds</p>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
/*
* Basic Count Down to Date and Time
* Author: @mrwigster / trulycode.com
*/
(function (e) {
  e.fn.countdown = function (t, n) {
  function i() {
    eventDate = Date.parse(r.date) / 1e3;
    currentDate = Math.floor(e.now() / 1e3);
    if (eventDate <= currentDate) {
      n.call(this);
      clearInterval(interval)
    }
    seconds = eventDate - currentDate;
    days = Math.floor(seconds / 86400);
    seconds -= days * 60 * 60 * 24;
    hours = Math.floor(seconds / 3600);
    seconds -= hours * 60 * 60;
    minutes = Math.floor(seconds / 60);
    seconds -= minutes * 60;
    days == 1 ? thisEl.find(".timeRefDays").text("day") : thisEl.find(".timeRefDays").text("days");
    hours == 1 ? thisEl.find(".timeRefHours").text("hour") : thisEl.find(".timeRefHours").text("hours");
    minutes == 1 ? thisEl.find(".timeRefMinutes").text("minute") : thisEl.find(".timeRefMinutes").text("minutes");
    seconds == 1 ? thisEl.find(".timeRefSeconds").text("second") : thisEl.find(".timeRefSeconds").text("seconds");
    if (r["format"] == "on") {
      days = String(days).length >= 2 ? days : "0" + days;
      hours = String(hours).length >= 2 ? hours : "0" + hours;
      minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
      seconds = String(seconds).length >= 2 ? seconds : "0" + seconds
    }
    if (!isNaN(eventDate)) {
      thisEl.find(".days").text(days);
      thisEl.find(".hours").text(hours);
      thisEl.find(".minutes").text(minutes);
      thisEl.find(".seconds").text(seconds)
    } else {
      alert("Invalid date. Example: 30 Tuesday 2013 15:50:00");
      clearInterval(interval)
    }
  }
  var thisEl = e(this);
  var r = {
    date: null,
    format: null
  };
  t && e.extend(r, t);
  i();
  interval = setInterval(i, 1e3)
  }
  })(jQuery);
  $(document).ready(function () {
  function e() {
    var e = new Date;
    e.setDate(e.getDate() + 60);
    dd = e.getDate();
    mm = e.getMonth() + 1;
    y = e.getFullYear();
    futureFormattedDate = mm + "/" + dd + "/" + y;
    return futureFormattedDate
  }
  $("#countdown").countdown({
    date: "17 August 2017 21:30:00", // Change this to your desired date to countdown to
    format: "on"
  });
});
</script>
<style>
#countdown p {
  display: inline-block;
  padding: 5px;
  background: #FFA500;
  margin: 0 0 20px;
}
</style>