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>
Related
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.
I am creating a website in which there are various campaigns.
User can set timer to this campaigns.
There is a webpage in which all campaigns are listed in table.
And I want to show a timer for every campaign in that particular table using JavaScript.
I have created a JavaScript function which takes a timeout and starts a timer but I want to show multiple timers at once.
Thank you.
Not long ago I also needed multiple timers in the same page, so I created a simple interval sync tool. The main goal is to move all timers with only one interval and save CPU.
You can check it here -> https://ilian6806.github.io/Ticker/.
Also, if you are using jQuery, you can use it as a plugin.
(function () {
function secondsToTime(sec, colonBlinking) {
sec = parseInt(sec, 10);
if (sec <= 0) {
return '00:00:00';
}
var days = Math.floor(sec / 86400);
var hours = Math.floor((sec - days * 86400) / 3600);
var minutes = Math.floor((sec - (hours * 3600) - (days * 86400)) / 60);
var seconds = sec - (days * 86400) - (hours * 3600) - (minutes * 60);
if (days > 0) { hours += (days * 24); }
if (hours < 10) { hours = '0' + hours; }
if (minutes < 10) { minutes = '0' + minutes; }
if (seconds < 10) { seconds = '0' + seconds; }
return hours + ':' + minutes + ':' + seconds;
}
$.fn.timer = function (ticker, time, callback) {
if (!window.Ticker || !(ticker instanceof Ticker)) {
return this;
}
var that = this;
var currTickId = parseInt(this.data('jqTimerInterval'));
if (currTickId) {
ticker.clear(currTickId);
}
that.html(secondsToTime(time));
var tickId = ticker.set(function () {
time--;
that.html(secondsToTime(time));
if (time < 0) {
ticker.clear(tickId);
if ($.isFunction(callback)) {
callback();
}
}
});
this.data('jqTimerInterval', tickId);
this.addClass('jq-timer');
return this;
};
$.fn.clearTimers = function () {
this.find('.jq-timer').each(function () {
var currInterval = $(this).data('jqTimerInterval');
if (currInterval) {
clearInterval(currInterval);
}
});
return this;
};
})();
Usage:
var ticker = new Ticker(1000); // This is the default value
$('#your-selector').timer(ticker, 3600 function() {
console.log('Done.');
});
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 am using this script for countdown in my site and it's work
<script type="text/javascript">
(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("day");
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 {
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: "<?php echo $newcounter ?> ", // Change this to your desired date to countdown to
format: "on"
});
});
</script>
but i have a problem. this script use my user computer date but i want use my site host date. how can change my date read from my host?
thank you.
Pretty sure this will work:
currentDate = <?php echo time() ?>;
Looks like currentDate is just a Unix timestamp which time() will provide for you.
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
}