Daily Countdown Clock

Question

I want to add a 'daily countdown clock' on one of my websites for one of the promotional offers.

Basically I want the clock to reset at midnight every night, so at midnight it will say '0 days, 24 hours, 0 minutes, 0 seconds' remaining.

I have the code for a countdown to a specific date which you can see here:-

http://jsfiddle.net/7dso7d1x/

HTML:

<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>

CSS:

#countdown p {
    display: inline-block;
    padding: 5px;
    background: #EEE;
    margin: 0 0 20px;
}

jQuery:

(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)
        }
    }
    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: "8 September 2014 09:00:00", // Change this to your desired date to countdown to
        format: "on"
    });
});

Just wondering how I could achieve this to automatically reset at midnight every day.

EDIT::

I'm trying to do it as follows:-

var d = new Date();

var month = d.getMonth()+1;
var day = d.getDate();

var output = d.getFullYear() + '/' +
    ((''+month).length<2 ? '0' : '') + month + '/' +
    ((''+day).length<2 ? '0' : '') + day;


$('#clock').countdown("'"+output+"'").on('update.countdown', function (event) {
     var $this = $(this).html(event.strftime('' + '<span>%-w</span> week%!w ' + '<span>%-d</span> day%!d ' + '<span>%H</span> hr ' + '<span>%M</span> min ' + '<span>%S</span> sec'));
 });

Then I thought I could set the date as date+1 but I cant seem to get the above code to work, any ideas?

Answer 1

1. How about setting the application to automatically stop and start at midnight, or restart at midnight?

2. By the way, it's basically a clock that goes the other way around. It would be enough to use the same code as for the clock, just replace the characters or part of the code to go the other way around.
   
   
   Edit:
   (i)The code may not be correct.
   But it works like a countdown.
   // Fork from https://codepen.io/afarrar/pen/JRaEjP

HTML

<div id="MyClockDisplay" class="clock" onload="showTime()"></div>

CSS

body {
background: black;
}

.clock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #17D4FE;
    font-size: 60px;
    font-family: Orbitron;
    letter-spacing: 7px;
}

JS

function showTime(){
    var date = new Date();
    var h = date.getHours(); // 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59
    
    
    
    // Clock shift
    h = h+2;
    // The minus values for h that arise in this way need to be corrected
    // for example, by changing the time zone
    
    
    
    // Turn the clock to count down
    h = 23-h;
    m = 59-m;
    s = 59-s;
    
    
    
    // if (Correction if h<0)
    // else if (1:1:1 -> 01:01:01)
    if(h < 0){
        h="xx"
        m="xx"
        s="xx"  
    }
    else if(h < 10){
    h = (h < 10) ? "0" + h : h;}
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;
    
    
    
    var time = h + ":" + m + ":" + s;
    document.getElementById("MyClockDisplay").innerText = time;
    document.getElementById("MyClockDisplay").textContent = time;
    setTimeout(showTime, 1000);
}

showTime();

Answer 2

You may refer to below code:

• jsfiddle

  <div id="clock"></div>
  
  $('#clock').countdown('2015/09/08').on('update.countdown', function (event) {
  var $this = $(this).html(event.strftime('' + 
  '<span>%-w</span> week%!w ' + '<span>%-d</span> day%!d ' + 
  '<span>%H</span> hr ' + '<span>%M</span> min ' + 
  '<span>%S</span> sec'));});
  

Also you may refer to examples by jQuery.countdown:

• Examples

Updated jsfiddle, basically in order to reset it everyday would be like:

<div id="clock"></div>
var date = new Date();
date.setDate(date.getDate() + 1);

$('#clock').countdown(date).on('update.countdown', function (event) {
    var $this = $(this).html(event.strftime('' + '<span>%-d</span> day%!d ' + '<span>%H</span> hr ' + '<span>%M</span> min ' + '<span>%S</span> sec'));
});

Answer 3

Okay, thanks to @Moein Almasi - I managed to get the result I needed which you can see below:-

HTML:

<div id="clock"></div>

CSS:

#clock {
    display: inline-block;
    padding: 5px;
    background: #EEE;
    margin: 0 0 20px;
}

jQuery::

var d = new Date();

var month = d.getMonth()+1;
var day = d.getDate()+1;

var output = d.getFullYear() + '/' +
    ((''+month).length<2 ? '0' : '') + month + '/' +
    ((''+day).length<2 ? '0' : '') + day;


$('#clock').countdown(output).on('update.countdown', function (event) {
     var $this = $(this).html(event.strftime('' + '<span>%-d</span> day%!d ' + '<span>%H</span> hr ' + '<span>%M</span> min ' + '<span>%S</span> sec'));
 });