0

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>
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>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.