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
});
});
//]]>
Related
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>
I wish to do a countdown to a specific date and hour (January 10, 2018, 19:30). Which in large part I am able to do. Below code shows the remaining days, hours, minutes and seconds.
The tricky bit is to get certain periods of time. The countdown should respond to the following:
1. on the deadline day and hour show the message 'Now going live'. Which is 10 January 2018 19:30.
2. That same day but BEFORE 19:30 it should say 'Going live tonight'
3. The complete day before the deadline day (from 00:00 to 23:59) it should say 'last day'
4. The complete days before that it should say 'many days to go'
Step 1 and 2 I managed, but I'm having trouble getting the complete day before the deadline day and the complete days before that. That's because I'm not able to define the complete day before the deadline day (and the days before that). Because it counts '1 day' as 1 day before 10 January 19:30 (so it also takes those hours/minutes of 19:30 into account).
Step 1 and 2 I managed in the if-loop, but I can't figure out how to do step 3 and 4. Step 3 should say something like 'count one day, but before 10 January 2018 00:00. So it should subtract that 19:30 to get to 9 januari 2018 00:00-23:59. And the same for step 4. Can someone fix my code?
// Get todays date and time
var now = new Date().getTime();
// Set the date we're counting down to
var countDownDate = new Date("Januari 10, 2018 19:30").getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result
this.timeleft.text = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
// countdown day 19:30
if ((days == 0) && (hours == 0) && (minutes == 0)) {
this.countdown.text = "NOW GOING LIVE!";
// countday day 00:00 - 19.30
} else if ((days == 0) && (hours <= 19) && (minutes <= 30)) {
this.countdown.text = "GOING LIVE TONIGHT!";
// 9 January 00:00 - 23:59
} else if ((days <= 1) && (hours >= 19) && (minutes >= 30)) {
this.countdown.text = "LAST DAY";
// days before 10 January
} else if (days >= 1) {
this.countdown.text = "MANY DAYS TO GO";
}
Since the "deadline" is hard-coded, you can hard-code everything and end up with something very simple:
var now = new Date().getTime();
var lastDayThreshold = new Date("January 9, 2018 00:00").getTime();
var liveTonightThreshold = new Date("January 10, 2018 00:00").getTime();
var countDownDate = new Date("January 10, 2018 19:30").getTime();
if (now < lastDayThreshold) this.countdown.text = "MANY DAYS TO GO";
else if(now < liveTonightThreshold) this.countdown.text = "LAST DAY";
else if(now < countDownDate) this.countdown.text = "LIVE TONIGHT";
else this.countdown.text = "NOW GOING LIVE";
Alex's answer was indeed what I was after. Those 'treshhold times' did the trick. Was thinking about improving it though as now I have to hard-code three dates/times. Preferably I would like to only specify the countDownDate date/time. And then let both Threshold dates calculate themselves. I tried to do that in a way, but ran into a problem. I know how to specify one day (1000 * 60 * 60 * 24), so I could subtract this 'oneday' value to get to the day before. But I wasn't able to calculate the milliseconds for the specified time 19:30. In order to read the miilliseconds since the beginning of January 10 until January 10 19:30. If I were able to do that it would look something like this (though I know this is incorrect, but you'll get the idea):
var oneday = 1000 * 60 * 60 * 24;
var countDownDate = new Date("January 10, 2018 19:30").getTime();
var lastDayThreshold = new Date(countDownDate - oneday "00:00").getTime();
var liveTonightThreshold = new Date(countDownDate "00:00").getTime();
You'll see my problem: for lastDayTreshold I could subtract one day of the countdowndate but then it would consider that 19:30 the previous day, not 00:00. And for liveTonightThreshold I also couldn't specify that I mean 00:00 of the countdowndate.
Would there be a way of doing that? Then I would just have to specify the countdown day and time and the rest would figure them out themselves.
I have this code:
And its not working. It's always showing -7 hours, it should count to next 7:00.
How to do this?
function ShowTime() {
var now = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
var hrs = 7-now.getHours();
var mins = 60-now.getMinutes();
var secs = 60-now.getSeconds();
timeLeft = "" +hrs+' hours '+mins+' minutes '+secs+' seconds';
$("#countdown").html(timeLeft);
}
var countdown;
function StopTime() {
clearInterval(countdown);
}
setInterval(ShowTime ,1000);
getHours(); The getHours() method returns the hour (from 0 to 23) of the specified date and time.
So change your code 7-now.getHours(); returns negative when the time is past 7
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);
i'm a beginner in JavaScript.
I would like to do a really minimalist countdown, i found this script : http://codepen.io/scottobrien/pen/Fvawk
but when i'm trying to customize it with my settings, nothing happen.
Thank you for helping.
Here is my code
<ul class="countdown">
<li>
<span class="days"></span>
<p class="timeRefDays"></p>
</li>
<li>
<span class="hours"></span>
<p class="timeRefHours"></p>
</li>
<li>
<span class="minutes"></span>
<p class="timeRefMinutes"></p>
</li>
<li>
<span class="seconds"></span>
<p class="timeRefSeconds"></p>
</li>
</ul>
(function($) {
$.fn.countdown = function(options, callback) {
//custom 'this' selector
var thisEl = $(this);
//array of custom settings
var settings = {
'date': 7 May 2012 17:30:00;
'format': on
};
//append the settings array to options
if(options) {
$.extend(settings, options);
}
//main countdown function
function countdown_proc() {
var eventDate = Date.parse(settings['date']) / 1000;
var currentDate = Math.floor($.now() / 1000);
if(eventDate <= currentDate) {
callback.call(this);
clearInterval(interval);
}
var seconds = eventDate - currentDate;
var 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
var hours = Math.floor(seconds / (60 * 60));
seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed
var 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(""); } else { thisEl.find(".timeRefDays").text(""); }
if (hours == 1) { thisEl.find(".timeRefHours").text(""); } else { thisEl.find(".timeRefHours").text(""); }
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);
//Call countdown plugin
$(".countdown").countdown({
date: "7 May 2014 6:19:00", // add the countdown's end date (i.e. 3 november 2012 12:00:00)
format: "on" // on (03:07:52) | off (3:7:52) - two_digits set to ON maintains layout consistency
},
function() {
// the code here will run when the countdown ends
alert("done!")
});
In my case it work like this
$(document).ready(function(){
$("#countdown").countdown({
date: "10 30 2015 12:00:00", // m d y and time
format: "on"
})
});
Change here:
var settings = {
'date': '7/5/2012 17:30:00';
'format': 'd-m-y'
};
Also here:
$(".countdown").countdown({
date: "7/5/2012 17:30:00", // add the countdown's end date (i.e. 3 november 2012 12:00:00)
format: "d-m-y" // on (03:07:52) | off (3:7:52) - two_digits set to ON maintains layout consistency
}