Develop Reference

jQuery Count Down timer based on Remaining Days, Hours, Minutes and Seconds

I'm creating a system where I have to check the deadline based on the client's initialization. For example, if the client's initialization was today at time x and the deadline is tomorrow or future at time y, I would like to calculate the time remaining inform of a countdown timer. I have managed to get the time remaining and my problem is count down timer to show the remaining days, hours, minutes, and seconds.
The following HTML code indicates the remaining time to the deadline
<span style='color: green;'>
<span class='e-m-days'>0</span> Days |
<span class='e-m-hours'>8</span> Hours |
<span class='e-m-minutes'>0</span> Minutes |
<span class='e-m-seconds'>1</span> Seconds
</span>
My jQuery code:
<script>
$(function(){
var days = parseInt( $('.e-m-days').html() );
var hours = parseInt( $('.e-m-hours').html() );
var minutes = parseInt( $('.e-m-minutes').html() );
var seconds = parseInt( $('.e-m-seconds').html() );
var minutesWrap = 0;
var hoursWrap = 0;
var daysWrap;
var hoursRem = hours;
var timer = seconds;
var counter =seconds;
function countOrdersRemainingTime(){
var id = setTimeout(countOrdersRemainingTime, 1000);
if(timer < 0){
minutesWrap ++;
timer = 59;
}
var minRem = minutes - minutesWrap;
if( minRem == -1 ){
hoursWrap + 1;
minRem = 59;
var hoursRem = hours - 1;
}
if(days == 0 && hours == 0 && minutes == 0 && seconds == 0){
clearTimeout(id);
}
$('.e-m-seconds').html(timer);
$('.e-m-minutes').html(minRem);
$('.e-m-hours').html(hoursRem);
timer --;
}
countOrdersRemainingTime();
});
</script>
The key thing is to create a count down timer that counts until the deadline is reached, i.e until the number of days, hours, minutes, and seconds becomes zero. I have tried for hours with no success :(.

Consider the following example.
$(function() {
function getCounterData(obj) {
var days = parseInt($('.e-m-days', obj).text());
var hours = parseInt($('.e-m-hours', obj).text());
var minutes = parseInt($('.e-m-minutes', obj).text());
var seconds = parseInt($('.e-m-seconds', obj).text());
return seconds + (minutes * 60) + (hours * 3600) + (days * 3600 * 24);
}
function setCounterData(s, obj) {
var days = Math.floor(s / (3600 * 24));
var hours = Math.floor((s % (60 * 60 * 24)) / (3600));
var minutes = Math.floor((s % (60 * 60)) / 60);
var seconds = Math.floor(s % 60);
console.log(days, hours, minutes, seconds);
$('.e-m-days', obj).html(days);
$('.e-m-hours', obj).html(hours);
$('.e-m-minutes', obj).html(minutes);
$('.e-m-seconds', obj).html(seconds);
}
var count = getCounterData($(".counter"));
var timer = setInterval(function() {
count--;
if (count == 0) {
clearInterval(timer);
return;
}
setCounterData(count, $(".counter"));
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="counter" style='color: green;'>
<span class='e-m-days'>0</span> Days |
<span class='e-m-hours'>8</span> Hours |
<span class='e-m-minutes'>0</span> Minutes |
<span class='e-m-seconds'>1</span> Seconds
</div>
Based on: https://www.w3schools.com/howto/howto_js_countdown.asp

I believe this is what you're looking for. I've added comments to show exactly what's happening. Please let me know if anything isn't clear. I just picked a random date as a target date, but you can change it to anything you want :)
$(document).ready(function() {
const days = $(".e-m-days");
const hours = $(".e-m-hours");
const minutes = $(".e-m-minutes");
const seconds = $(".e-m-seconds");
const targetDate = new Date('May 17, 2020 03:24:00');
function convertMillis(milliseconds, format) {
var days, hours, minutes, seconds, total_hours, total_minutes, total_seconds;
total_seconds = parseInt(Math.floor(milliseconds / 1000));
total_minutes = parseInt(Math.floor(total_seconds / 60));
total_hours = parseInt(Math.floor(total_minutes / 60));
days = parseInt(Math.floor(total_hours / 24));
seconds = parseInt(total_seconds % 60);
minutes = parseInt(total_minutes % 60);
hours = parseInt(total_hours % 24);
switch(format) {
case 's':
return total_seconds;
case 'm':
return total_minutes;
case 'h':
return total_hours;
case 'd':
return days;
default:
return { d: days, h: hours, m: minutes, s: seconds };
}
};
window.setInterval( function()
{
// Where we check if 'now' is greater than the target date
var date = Date.now();
if (date > targetDate)
{
// Where we break
console.log("Expired");
clearInterval();
} else
{
// Where we set values
var millis = targetDate - date;
var millisObject = convertMillis(millis);
// Display values in HTML
days.text(millisObject.d);
hours.text(millisObject.h);
minutes.text(millisObject.m);
seconds.text(millisObject.s);
};
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span style='color: green;'>
<span class='e-m-days'>0</span> Days |
<span class='e-m-hours'>0</span> Hours |
<span class='e-m-minutes'>0</span> Minutes |
<span class='e-m-seconds'>0</span> Seconds
</span>

How to remove the "day" when the countdown clock is under 24 hours

I'd like the day numbers to disappear when the clock goes below 24 hours instead of having it read "00".
I've attempted a few solutions, but nothing seems to be working for me. I can attach the HTML/CSS if it is needed.
Here is my js:
//
(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("Days") : thisEl.find(".timeRefDays").text("Days");
hours == 1 ? thisEl.find(".timeRefHours").text("Hours") : thisEl.find(".timeRefHours").text("Hours");
minutes == 1 ? thisEl.find(".timeRefMinutes").text("Minutes") : thisEl.find(".timeRefMinutes").text("Minutes");
seconds == 1 ? thisEl.find(".timeRefSeconds").text("Seconds") : 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{
errorMessage = "Invalid date. Example: 27 March 2015 17:00:00";
alert(errorMessage);
console.log(errorMessage);
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: "05 December 2019 14:00:00",
format: "on"
});
});
});
I'm not really sure what other details I can provide, but please let me know if there is anything else I can submit to make this easier to answer.

Countdown Timer Location Specific?

i've added a JS countdown timer to my website but just realized that it doesn't reference a user's geographical location...
so, for example, if the event is at 3pm sunday pt, the timer will reflect the same for east coast time, 3pm, instead of 6pm... is there a way that to make the timer adjust to location?
here's the code:
(function($) {
$.fn.countdown = function(options, callback) {
//custom 'this' selector
thisEl = $(this);
//array of custom settings
var settings = {
'date': null,
'format': null
};
//append the settings array to options
if(options) {
$.extend(settings, options);
}
//main countdown function
function countdown_proc() {
eventDate = Date.parse(settings['date']) / 1000;
currentDate = Math.floor($.now() / 1000);
if(eventDate <= currentDate) {
callback.call(this);
clearInterval(interval);
}
seconds = eventDate - currentDate;
days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days
seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed
hours = Math.floor(seconds / (60 * 60));
seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed
minutes = Math.floor(seconds / 60);
seconds -= minutes * 60; //update the seconds variable with no. of minutes removed
//conditional Ss
if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }
//logic for the two_digits ON setting
if(settings['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;
}
//update the countdown's html values.
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. Here's an example: 12 Tuesday 2012 17:30:00");
clearInterval(interval);
}
}
//run the function
countdown_proc();
//loop the function
interval = setInterval(countdown_proc, 1000);
}
}) (jQuery);
EDIT:
ok, just now noticed the html code you also provided....
here's my setup right now:
html -
<!-- countdown start -->
<div id="countdown-wrapper">
<ul id="countdown">
<!-- days start -->
<li>
<span class="days">00</span>
<p class="timeRefDays">days</p>
</li>
<!-- hours start -->
<li>
<span class="hours">00</span>
<p class="timeRefHours">hours</p>
</li>
<!-- minutes start -->
<li>
<span class="minutes">00</span>
<p class="timeRefMinutes">minutes</p>
</li>
<!-- seconds start -->
<li>
<span class="seconds">00</span>
<p class="timeRefSeconds">seconds</p>
</li>
</ul>
</div>
<!-- end countdown -->
here's the script at the bottom of the same page:
//<![CDATA[
$(document).ready(function(){
"use strict";
$("#countdown").countdown({
date: "03 February 2019 15:30:00", // countdown target date settings
format: "on"
},
function() {
// callback function
});
});
//]]>
i posted the countdown.js file earlier
so how would i tie your code to this?
to be clear, i just want 1 (one) countdown timer to display on my website, set to pt, but i want it to reflect each user's geographical location, i.e. if i'm on the west coast and the countdown shows 1 hour for me, i want it to show 4 hours for east coast users...
thanks again dan, your help is very much appreciated!

It's actually simpler than you think. The problem is your input. You're not telling it what time zone to work with. Your error example suggests that a "valid date" string is "12 Tuesday 2012 17:30:00". That's the problem. When you're working in Javascript in the browser, the system knows what timezone it is in, and whenever you create a timestamp, it converts the time to the preferred programming timezone, GMT. This means that as long as you know what the target timezone is, and you can convert that into GMT as well, you have a solid destination.
Firstly, I'll assume "Tuesday" in this example was meant to be a month (I'll pick December to make it a fun number). Most often, systems use something like the ISO-8601 format (2012-12-12T09:30:00.000Z), and I would recommend you either use that or UNIX timestamps (1355304600000), but you can even just use the offset-based time: Dec 12 2012 17:30:00 GMT-0800 if you're going to parse it yourself.
console.info(new Date().toString()); // "Thu Jan 31 2019 17:21:01 GMT-0700 (Mountain Standard Time)"
console.info(new Date().toISOString()); // "2019-02-01T00:21:57.468Z" (that's the current time in GMT)
console.info(new Date().getTimezoneOffset()); // 420 (that's minutes between me and GMT)
console.info(Date.now()); // 1548980627330 (unix timestamp)
Alternatively you can use something like moment-timezone (https://momentjs.com/timezone/) to deal with the timezones part for you.
Edit per your question
There's nothing wrong with the code you've written
(function($) {
$.fn.countdown = function(options, callback) {
var interval; // I added this to keep this variable in scope
//custom 'this' selector
var thisEl = $(this); // I added the `var` to keep this variable in scope so you can put more than one on a page.
//array of custom settings
var settings = {
'date': null,
'format': null
};
//append the settings array to options
if(options) {
$.extend(settings, options);
}
//main countdown function
function countdown_proc() {
eventDate = Date.parse(settings['date']) / 1000;
currentDate = Math.floor($.now() / 1000);
if(eventDate <= currentDate) {
callback.call(this);
clearInterval(interval);
}
seconds = eventDate - currentDate;
days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days
seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed
hours = Math.floor(seconds / (60 * 60));
seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed
minutes = Math.floor(seconds / 60);
seconds -= minutes * 60; //update the seconds variable with no. of minutes removed
//conditional Ss
if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }
//logic for the two_digits ON setting
if(settings['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;
}
//update the countdown's html values.
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. Here's an example: 12 Tuesday 2012 17:30:00");
clearInterval(interval);
}
}
//run the function
countdown_proc();
//loop the function
interval = setInterval(countdown_proc, 1000);
}
// Eastern Time
$('#countdown-eastern').countdown({ date: '2020-02-01T22:00:00Z'}, function () {
console.info('done')
})
// Pacific Time
$('#countdown-pacific').countdown({ date: '2020-02-02T01:00:00Z'}, function () {
console.info('done')
})
}) (jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="countdown-eastern">
<p>Until February 1, 2020, 5PM Eastern Time</p>
<span class="days"></span>
<span class="timeRefDays"></span>
<span class="hours"></span>
<span class="timeRefHours"></span>
<span class="minutes"></span>
<span class="timeRefMinutes"></span>
<span class="seconds"></span>
<span class="timeRefSeconds"></span>
</div>
<div id="countdown-pacific">
<p>Until February 1, 2020, 5PM Pacific Time</p>
<span class="days"></span>
<span class="timeRefDays"></span>
<span class="hours"></span>
<span class="timeRefHours"></span>
<span class="minutes"></span>
<span class="timeRefMinutes"></span>
<span class="seconds"></span>
<span class="timeRefSeconds"></span>
</div>
To be clear: I added the two var declarations at the top of your file, and I only changed the date that went into the .countdown() function, based on the timezone I wanted to be in.

There is a way to do this, you can use the geolocation API for your purposes. You need something like the following:
if ("geolocation" in navigator) {
/* geolocation is available */
navigator.geolocation.getCurrentPosition(/* more code here */)
} else {
/* geolocation IS NOT available, so for example: */
setGenericTimer()
}
However, they do point out this caveat:
By default, getCurrentPosition() tries to answer as fast as possible
with a low accuracy result. It is useful if you need a quick answer
regardless of the accuracy. Devices with a GPS, for example, can take
a minute or more to get a GPS fix, so less accurate data (IP location
or wifi) may be returned to getCurrentPosition().
Check out the documentation:
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API

thank you hcs...
where would i add this to the script? for example, here's the script in my document that references the script i posted above, would i add the code you posted to this script?
//<![CDATA[
$(document).ready(function(){
"use strict";
$("#countdown").countdown({
date: "03 February 2019 15:30:00", // countdown target date settings
format: "on"
},
function() {
// callback function
});
});
//]]>

Need help resetting a javascript countdown timer

So I am a web designer and I inherited a site from another developer. The site in question is for an annual event and features a countdown timer on the home page. I am still pretty new to js and could use some help resetting the timer to next years date of March 1st, 2019. I have posted the code for the count down timer below. Any advice would be much appreciated!
(function($) {
$.fn.countdown = function(options, callback) {
//custom 'this' selector
thisEl = $(this);
//array of custom settings
var settings = {
'date': null,
'format': null
};
//append the settings array to options
if(options) {
$.extend(settings, options);
}
//main countdown function
function countdown_proc() {
eventDate = Date.parse(settings['date']) / 1000;
currentDate = Math.floor($.now() / 1000);
if(eventDate <= currentDate) {
callback.call(this);
clearInterval(interval);
}
seconds = eventDate - currentDate;
days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days
seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed
hours = Math.floor(seconds / (60 * 60));
seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed
minutes = Math.floor(seconds / 60);
seconds -= minutes * 60; //update the seconds variable with no. of minutes removed
//conditional Ss
if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }
//logic for the two_digits ON setting
if(settings['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;
}
//update the countdown's html values.
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. Here's an example: 12 Tuesday 2012 17:30:00");
clearInterval(interval);
}
}
//run the function
countdown_proc();
//loop the function
interval = setInterval(countdown_proc, 1000);
}
}) (jQuery);

You need to construct a date via the Date object and then pass the date and a callback function to countdown
const oneHourFromNow= new Date();
oneHourFromNow.setHours(oneHourFromNow.getHours() + 1);
const config = {
"date": oneHourFromNow.toString(),
"format": "off"
}
const callbackFunc = function() {console.log("Do something");}
$.fn.countdown(config , callbackFunc );
(function($) {
let interval;
$.fn.countdown = function(options, callback) {
//custom 'this' selector
// I hard-coded this ***
thisEl = $('#countdown-timer');
//array of custom settings
var settings = {
'date': null,
'format': null
};
//append the settings array to options
if(options) {
$.extend(settings, options);
}
//main countdown function
function countdown_proc() {
eventDate = Date.parse(settings['date']) / 1000;
currentDate = Math.floor($.now() / 1000);
if(eventDate <= currentDate) {
callback.call(this);
clearInterval(interval);
}
seconds = eventDate - currentDate;
days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days
seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed
hours = Math.floor(seconds / (60 * 60));
seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed
minutes = Math.floor(seconds / 60);
seconds -= minutes * 60; //update the seconds variable with no. of minutes removed
//console.log(thisEl, thisEl.find(".timeRefDays"));
//conditional Ss
if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }
//logic for the two_digits ON setting
if(settings['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;
}
//update the countdown's html values.
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. Here's an example: 12 Tuesday 2012 17:30:00");
clearInterval(interval);
}
}
//run the function
countdown_proc();
//loop the function
interval = setInterval(countdown_proc, 1000);
}
// here you can create your Date instance any way you like:
const oneHourFromNow= new Date();
oneHourFromNow.setHours(oneHourFromNow.getHours() + 1);
const config = {
"date": oneHourFromNow.toString(),
"format": "off"
}
const callbackFunc = function() {console.log("Do something");}
$.fn.countdown(config , callbackFunc );
}) (jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="countdown-timer">
<span class="days"></span> <span class="timeRefDays"></span>
<span class="hours"></span> <span class="timeRefHours"></span>
<span class="minutes"></span> <span class="timeRefMinutes"></span>
<span class="seconds"></span> <span class="timeRefSeconds"></span>
</div>

what does this countdown-timer.js do? carousels not working when my computer's date is more than feb 28 2016

i am building a website by customizing a template.
It has carousel and gallery lightbox. but they only work until feb 28 2016.
When my computer's date is past feb like march 1 2016. those carousel or gallery lightbox stops working. i am freaking out. i think something is done by this countdown-timer.js file which contains following code: but i only understand a little of javascript. Please anyone, if you can tell me what this code is doing to my site, i would be grateful:
(function($) {
$.fn.countdown = function(options, callback) {
//custom 'this' selector
thisEl = $(this);
//array of custom settings
var settings = {
'date': null,
'format': null
};
//append the settings array to options
if(options) {
$.extend(settings, options);
}
//main countdown function
function countdown_proc() {
eventDate = Date.parse(settings['date']) / 1000;
currentDate = Math.floor($.now() / 1000);
if(eventDate <= currentDate) {
callback.call(this);
clearInterval(interval);
}
seconds = eventDate - currentDate;
days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days
seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed
hours = Math.floor(seconds / (60 * 60));
seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed
minutes = Math.floor(seconds / 60);
seconds -= minutes * 60; //update the seconds variable with no. of minutes removed
//conditional Ss
if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }
//logic for the two_digits ON setting
if(settings['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;
}
//update the countdown's html values.
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. Here's an example: 12 Tuesday 2012 17:30:00");
clearInterval(interval);
}
}
//run the function
countdown_proc();
//loop the function
interval = setInterval(countdown_proc, 1000);
}
}) (jQuery);