Below is my JS and then my HTML . I cannot figure out why my countdown clock doesn't automatically count down. You must refresh every second to see the correct amount of time left. Any ideas? BTW this is for a Christmas countdown website I am working on.
var Countdowns = function(end, elements, timer, callback) {
var _seconds = 1000,
_minutes = _seconds * 60,
_hours = _minutes * 60,
_days = _hours * 24,
end = new Date(end)
timer,
calculate = function() {
var now = new Date(),
remaining = end.getTime() - now.getTime(),
data;
if (isNaN(end)) {
console.log('Invalid date/time')
return;
}
if (remaining <= 0) { // clear timer
clearInterval(timer);
// callback
if (typeof callback === 'function') {
callback()
}
} else {
if (!timer) {
timer = setInterval(calculate, _seconds);
}
data = {
'days': Math.floor(remaining / _days),
'hours': Math.floor((remaining % _days) / _hours),
'minutes': Math.floor((remaining % _hours) / _minutes),
'seconds': Math.floor((remaining % _minutes) / _seconds),
}
if (elements.length) {
for (x in elements) {
var x = elements[x];
data[x] = ('00' + data[x]).slice(-2);
document.getElementById(x).innerHTML = data[x];
}
}
}
};
calculate();
}
<!DOCTYPE html>
<html>
<head>
<title>Countdowns</title>
</head>
<body>
<span id="days">00</span>
<span id="hours">00</span>
<span id="minutes">00</span>
<span id="seconds">00</span>
<script src="Countdowns.js"></script>
<script>
var callbackfunction = function() {
console.log('Done!')
}
Countdowns('12/25/2015 00:00:00 AM', ['days', 'hours', 'minutes', 'seconds']);
callbackfunction);
</script>
</body>
</html>
You have a couple of minor errors. Try this:
var Countdowns = function(end, elements, timer, callback) {
var _seconds = 1000,
_minutes = _seconds * 60,
_hours = _minutes * 60,
_days = _hours * 24,
end = new Date(end)
timer,
calculate = function() {
var now = new Date(),
remaining = end.getTime() - now.getTime(),
data;
if (isNaN(end)) {
console.log('Invalid date/time')
return;
}
if (remaining <= 0) { // clear timer
clearInterval(timer);
// callback
if (typeof callback === 'function') {
callback()
}
} else {
if (!timer) {
timer = setInterval(calculate, _seconds);
}
data = {
'days': Math.floor(remaining / _days),
'hours': Math.floor((remaining % _days) / _hours),
'minutes': Math.floor((remaining % _hours) / _minutes),
'seconds': Math.floor((remaining % _minutes) / _seconds),
}
if (elements.length) {
for (x in elements) {
var x = elements[x];
data[x] = ('00' + data[x]).slice(-2);
document.getElementById(x).innerHTML = data[x];
}
}
}
};
calculate();
};
var callbackfunction = function() {
console.log('Done!')
}
Countdowns('12/25/2015 00:00:00 AM', ['days', 'hours', 'minutes', 'seconds']);
callbackfunction();
<!DOCTYPE html>
<html>
<head>
<title>Countdowns</title>
</head>
<body>
<span id="days">00</span>
<span id="hours">00</span>
<span id="minutes">00</span>
<span id="seconds">00</span>
<script src="Countdowns.js"></script>
</body>
</html>
replace callbackfunction); with callbackfunction();
var Countdowns = function(end, elements, timer, callback) {
var _seconds = 1000,
_minutes = _seconds * 60,
_hours = _minutes * 60,
_days = _hours * 24,
end = new Date(end)
timer,
calculate = function() {
var now = new Date(),
remaining = end.getTime() - now.getTime(),
data;
if (isNaN(end)) {
console.log('Invalid date/time')
return;
}
if (remaining <= 0) { // clear timer
clearInterval(timer);
// callback
if (typeof callback === 'function') {
callback()
}
} else {
if (!timer) {
timer = setInterval(calculate, _seconds);
}
data = {
'days': Math.floor(remaining / _days),
'hours': Math.floor((remaining % _days) / _hours),
'minutes': Math.floor((remaining % _hours) / _minutes),
'seconds': Math.floor((remaining % _minutes) / _seconds),
}
if (elements.length) {
for (x in elements) {
var x = elements[x];
data[x] = ('00' + data[x]).slice(-2);
document.getElementById(x).innerHTML = data[x];
}
}
}
};
calculate();
};
var callbackfunction = function() {
console.log('Done!')
};
Countdowns('12/25/2015 00:00:00 AM', ['days', 'hours', 'minutes', 'seconds']);
<span id="days">00</span>
<span id="hours">00</span>
<span id="minutes">00</span>
<span id="seconds">00</span>
Related
Three problems, my start button starts more than one timer at the same time instead of only once for multiple clicks to start. Second, my stop button doesn't work. and my reset button, changes the text but doesnt stop the timer. Here's my code:
function stopTimer(timer) {
clearInterval(timer);
}
function resetTimer(duration, display) {
var timer = duration,
minutes, seconds;
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
}
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
setInterval(function() {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
// Beep when counter reaches zero
if (--timer < 0) {
timer = duration;
var context = new AudioContext();
var oscillator = context.createOscillator();
oscillator.type = "sine";
oscillator.frequency.value = 800;
oscillator.connect(context.destination);
oscillator.start();
setTimeout(function() {
oscillator.stop();
}, 100);
}
}, 1000);
}
var time_in_seconds = 5;
display = document.querySelector('#time');
document.getElementById("start").addEventListener("click", function() {
startTimer(time_in_seconds, display);
});
document.getElementById("stop").addEventListener("click", function() {
stopTimer(timer);
});
document.getElementById("reset").addEventListener("click", function() {
resetTimer(time_in_seconds, display);
});
<html>
<body>
<div id="time">00:10</div>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
<script>
</script>
</body>
</html>
var duration = 5;
var timer_id = null;
var timer_seconds = duration;
var timer_active = 0;
var display = document.querySelector('#time');
function BeepOnce() {
timer_seconds = duration;
var context = new AudioContext();
var oscillator = context.createOscillator();
oscillator.type = "sine";
oscillator.frequency.value = 800;
oscillator.connect(context.destination);
oscillator.start();
setTimeout(function() {
oscillator.stop();
}, 100);
}
function UpdateDisplay() {
var minutes = parseInt(timer_seconds / 60, 10);
var seconds = parseInt(timer_seconds % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
}
function TimerReset() {
timer_seconds = duration;
timer_active = 1;
UpdateDisplay();
}
function TimerStart() {
timer_seconds = duration;
timer_active = 1;
UpdateDisplay();
}
function TimerStop() {
timer_active = 0;
/*clearInterval(timer_id);*/
}
function TimerInit() {
UpdateDisplay();
var fun1 = function() {
if (timer_active) {
// Beep at Zero Seconds
if (--timer_seconds < 0) {
BeepOnce();
TimerReset();
}
// Countdown
else {
UpdateDisplay();
}
}
}
//called timer every second
timer_id = setInterval(fun1, 1000);
}
TimerInit();
document.getElementById("start").addEventListener("click", function() {
TimerStart();
});
document.getElementById("stop").addEventListener("click", function() {
TimerStop();
});
document.getElementById("reset").addEventListener("click", function() {
TimerReset();
});
<html>
<body>
<div id="time">00:10</div>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button></body>
</html>
I am using this code for countdown timer to a quiz test. Its working Fine. In this I need to add two buttons one is Pause button and another one is Resume button. When I click a Pause button it's stop time and when I click a Resume button it's start from where I pause the time.
I have tried this code. It's not working.
HTML Code
<div class="div__time">
<div style="display: none;" id="overall_time"></div>
<div id="overall_times"></div>
<div class="total_time"></div>
</div>
<input id="pauseButton" type="button" value="Pause">
<input id="resumeButton" type="button" value="Resume">
JS Code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script>
var speaking_ms = "00:00:10";
var speaking_ms_arr = speaking_ms.split(":");
var speaking_time_min_sec = (+speaking_ms_arr[0]) * 60 * 60 + (+speaking_ms_arr[1]) * 60 + (+speaking_ms_arr[2]);
var speaking_time_min_sec = parseInt(speaking_time_min_sec) + 1;
var speaking_value;
if (localStorage.getItem("speaking_counter")) {
if (localStorage.getItem("speaking_counter") <= 0) {
speaking_value = speaking_time_min_sec;
} else {
speaking_value = localStorage.getItem("speaking_counter");
}
} else {
speaking_value = speaking_time_min_sec;
}
document.getElementById('overall_time').innerHTML = speaking_value;
var speaking_counter = function() {
if (speaking_value <= 0) {
localStorage.setItem("speaking_counter", speaking_time_min_sec);
} else {
speaking_value = parseInt(speaking_value) - 1;
localStorage.setItem("speaking_counter", speaking_value);
}
document.getElementById('overall_time').innerHTML = speaking_value;
if (speaking_value == 0) {
localStorage.setItem("speaking_counter", speaking_value);
setTimeout(function() {
clearInterval(interval);
}, 1000);
}
var hours = Math.floor(speaking_value / 3600);
var minutes = Math.floor(speaking_value % 3600 / 60);
var seconds = Math.floor(speaking_value % 3600 % 60);
var red_time = hours + ' : ' + minutes + ' : ' + seconds;
document.getElementById('overall_times').innerHTML = red_time;
};
var interval = setInterval(function() {
speaking_counter();
}, 1000);
var Clock = {
pause: function() {
clearInterval(this.interval);
delete this.interval;
},
resume: function() {
if (!this.interval) this.start();
}
};
$('#pauseButton').click(function() { Clock.pause(); });
$('#resumeButton').click(function() { Clock.resume(); });
</script>
Fiddle Link
Thanks in Advance.
I changed the end of the code in the fiddle and it worked: https://jsfiddle.net/bohv0j9w/5/
var Clock = {
pause: function() {
clearInterval(interval);
interval = null;
},
resume: function() {
if (!interval) interval = setInterval(speaking_counter, 1000);
}
};
document.querySelector('#pauseButton').addEventListener("click", Clock.pause);
document.querySelector('#resumeButton').addEventListener("click", Clock.resume);
In your version this.internal is undefined you may want to learn about "this" and scopes in js. And $(...) is a syntax that requires the lib jquery (not included in the fiddle), the vanilla js equivalent is "document.querySelector", you should read the MDN article about this function.
Finally, your syntax is a bit old school. If you use localStorage you aren't targeting very old browsers maybe you should avoid jquery and use keywords such as "const".
Following are your mistakes. (Fiddle link)
var Clock = {
pause: function() {
clearInterval(this.interval);//(this.interval is undefined, replace it with interval)
^^^^
delete this.interval;//(this.interval is undefined, replace it with interval)
^^^^
},
resume: function() {
if (!this.interval) this.start();//(this.interval is undefined, replace it typeof interval === undefined to check whether interval exists or not)
^^^^
^^^^^^^^^^^ //(this.start() is also not defined, replace it with start() and move `var interval = setInterval(fun.....` into new start function)
}
};
look at following code.
var speaking_ms = "00:00:10";
var speaking_ms_arr = speaking_ms.split(":");
var speaking_time_min_sec = (+speaking_ms_arr[0]) * 60 * 60 + (+speaking_ms_arr[1]) * 60 + (+speaking_ms_arr[2]);
var speaking_time_min_sec = parseInt(speaking_time_min_sec) + 1;
var speaking_value;
if (localStorage.getItem("speaking_counter")) {
if (localStorage.getItem("speaking_counter") <= 0) {
speaking_value = speaking_time_min_sec;
} else {
speaking_value = localStorage.getItem("speaking_counter");
}
} else {
speaking_value = speaking_time_min_sec;
}
document.getElementById('overall_time').innerHTML = speaking_value;
var speaking_counter = function() {
if (speaking_value <= 0) {
localStorage.setItem("speaking_counter", speaking_time_min_sec);
} else {
speaking_value = parseInt(speaking_value) - 1;
localStorage.setItem("speaking_counter", speaking_value);
}
document.getElementById('overall_time').innerHTML = speaking_value;
if (speaking_value == 0) {
localStorage.setItem("speaking_counter", speaking_value);
setTimeout(function() {
clearInterval(interval);
}, 1000);
}
var hours = Math.floor(speaking_value / 3600);
var minutes = Math.floor(speaking_value % 3600 / 60);
var seconds = Math.floor(speaking_value % 3600 % 60);
var red_time = hours + ' : ' + minutes + ' : ' + seconds;
document.getElementById('overall_times').innerHTML = red_time;
};
var start = function() {
interval = setInterval(function() {
speaking_counter();
}, 1000);
}
var Clock = {
pause: function() {
clearInterval(interval);
delete interval;
},
resume: function() {
if (typeof interval === 'undefined') start();
}
};
$('#pauseButton').click(function() { Clock.pause(); });
$('#resumeButton').click(function() { Clock.resume(); });
start();
I have fixed your solution and implemented what you were trying to implement. There were minor issues with your solution which i fixed.
1. You were using this to access interval variable that was not part of the clock object in which you were accessing the variable.
2. You were using this.start() function in the resume function of clock object which was not part of the clock object.
3. JQuery used to define events was not included in the fiddle. Although it is included in the code pasted in the question.
html:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<div class="div__time">
<div style="display: none;" id="overall_time"></div>
<div id="overall_times"></div>
<div class="total_time"></div>
</div>
<input id="pauseButton" type="button" value="Pause">
<input id="resumeButton" type="button" value="Resume">
</body>
js:
var speaking_ms = "00:00:10";
var speaking_ms_arr = speaking_ms.split(":");
var speaking_time_min_sec = (+speaking_ms_arr[0]) * 60 * 60 + (+speaking_ms_arr[1]) * 60 + (+speaking_ms_arr[2]);
var speaking_time_min_sec = parseInt(speaking_time_min_sec) + 1;
var speaking_value;
if (localStorage.getItem("speaking_counter")) {
if (localStorage.getItem("speaking_counter") <= 0) {
speaking_value = speaking_time_min_sec;
} else {
speaking_value = localStorage.getItem("speaking_counter");
}
} else {
speaking_value = speaking_time_min_sec;
}
document.getElementById('overall_time').innerHTML = speaking_value;
var speaking_counter = function() {
if (speaking_value <= 0) {
localStorage.setItem("speaking_counter", speaking_time_min_sec);
} else {
speaking_value = parseInt(speaking_value) - 1;
localStorage.setItem("speaking_counter", speaking_value);
}
document.getElementById('overall_time').innerHTML = speaking_value;
if (speaking_value == 0) {
localStorage.setItem("speaking_counter", speaking_value);
setTimeout(function() {
clearInterval(interval);
}, 1000);
}
var hours = Math.floor(speaking_value / 3600);
var minutes = Math.floor(speaking_value % 3600 / 60);
var seconds = Math.floor(speaking_value % 3600 % 60);
var red_time = hours + ' : ' + minutes + ' : ' + seconds;
document.getElementById('overall_times').innerHTML = red_time;
};
var interval = setInterval(function() {
speaking_counter();
}, 1000);
var Clock = {
pause: function() {
clearInterval(interval);
delete interval;
},
resume: function() {
interval = setInterval(function() {
speaking_counter();
}, 1000);
}
};
$('#pauseButton').click(function() { Clock.pause(); });
$('#resumeButton').click(function() { Clock.resume(); });
Here is the fiddle link: JS Fiddle
You have gotten quite a few answers so far, I wanted to give you another example so that you have an alternative architecture to consider. Definitely read up on scopes and closures and the use of this. Also, you don't need jQuery for this function. Only import a large library like jQuery when you need it. In this case document.getElementById does you well, as does addEventListener.
There are even more exciting ways to handle a countdown (including the use of recursion), but below is an example of envisioning your Clock as a single object. This gives you greater control over the clock and it makes it reusable.
You can define functions on the clock that manage the interval, decrement the countdown, pause, resume, start and reset the clock. I added buttons for each so you can see how it would work. Also note that I commented out localStorage to show that it works without storage, but mainly because the snippets in StackOverflow aren't given permission to use localStorage so it would crash, but you can run this code here as is.
var Clock = {
speaking_value: 10,
interval: -1,
countdown: function() {
speaking_value = this.speaking_value;
if (speaking_value <= 0) {
//localStorage.setItem("speaking_counter", 0);
} else {
speaking_value = parseInt(speaking_value) - 1;
//localStorage.setItem("speaking_counter", speaking_value);
}
document.getElementById('overall_time').innerHTML = speaking_value;
if (speaking_value == 0) {
//localStorage.setItem("speaking_counter", speaking_value);
var self = this;
setTimeout(function() {
clearInterval(self.interval);
}, 1000);
}
this.speaking_value = speaking_value;
this.updateClock();
},
paused: false,
pause: function() {
clearInterval(this.interval);
this.paused = true;
},
resume: function() {
if (this.paused) {
this.paused = false;
this.tick();
}
},
updateClock: function() {
speaking_value = this.speaking_value;
var hours = Math.floor(speaking_value / 3600);
var minutes = Math.floor(speaking_value % 3600 / 60);
var seconds = Math.floor(speaking_value % 3600 % 60);
var red_time = hours + ' : ' + minutes + ' : ' + seconds;
document.getElementById('overall_times').innerHTML = red_time;
},
tick: function() {
var self = this;
this.interval = setInterval(function() {
self.countdown()
}, 1000)
},
start: function() {
this.updateClock();
this.tick();
},
reset: function(){
clearInterval(this.interval);
this.speaking_value = 10;
this.updateClock();
}
};
Clock.updateClock();
document.getElementById('startButton').addEventListener('click', function() { Clock.start(); });
document.getElementById('pauseButton').addEventListener('click', function() { Clock.pause(); });
document.getElementById('resumeButton').addEventListener('click', function() { Clock.resume(); });
document.getElementById('resetButton').addEventListener('click', function() { Clock.reset(); });
<div class="div__time">
<div style="display: none;" id="overall_time"></div>
<div id="overall_times"></div>
<div class="total_time"></div>
</div>
<input id="startButton" type="button" value="Start">
<input id="pauseButton" type="button" value="Pause">
<input id="resumeButton" type="button" value="Resume">
<input id="resetButton" type="button" value="Reset">
I am a JavaScript newbie. I am using a template which has the code below. It shows a countdown timer. I can't understand why it does not work. I have provided it the value of 90 days. Please guide. Thanks
// Generated by CoffeeScript 1.4.0
/*
countdown is a simple jquery plugin for countdowns
Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
and GPL-3.0 (http://opensource.org/licenses/GPL-3.0) licenses.
#source: http://github.com/rendro/countdown/
#autor: Robert Fleischmann
#version: 1.0.1
*/
(function () {
(function ($) {
$.countdown = function (el, options) {
var getDateData,
_this = this;
this.el = el;
this.$el = $(el);
this.$el.data("countdown", this);
this.init = function () {
_this.options = $.extend({}, $.countdown.defaultOptions, options);
if (_this.options.refresh) {
_this.interval = setInterval(function () {
return _this.render();
}, _this.options.refresh);
}
_this.render();
return _this;
};
getDateData = function (endDate) {
var dateData, diff;
endDate = Date.parse($.isPlainObject(_this.options.date) ? _this.options.date : new Date(_this.options.date));
diff = (endDate - Date.parse(new Date)) / 1000;
if (diff <= 0) {
diff = 0;
if (_this.interval) {
_this.stop();
}
_this.options.onEnd.apply(_this);
}
dateData = {
years: 90,
days: 90,
hours: 0,
min: 0,
sec: 90,
millisec: 0
};
if (diff >= (365.25 * 86400)) {
dateData.years = Math.floor(diff / (365.25 * 86400));
diff -= dateData.years * 365.25 * 86400;
}
if (diff >= 86400) {
dateData.days = Math.floor(diff / 86400);
diff -= dateData.days * 86400;
}
if (diff >= 3600) {
dateData.hours = Math.floor(diff / 3600);
diff -= dateData.hours * 3600;
}
if (diff >= 60) {
dateData.min = Math.floor(diff / 60);
diff -= dateData.min * 60;
}
dateData.sec = diff;
return dateData;
};
this.leadingZeros = function (num, length) {
if (length == null) {
length = 2;
}
num = String(num);
while (num.length < length) {
num = "0" + num;
}
return num;
};
this.update = function (newDate) {
_this.options.date = newDate;
return _this;
};
this.render = function () {
_this.options.render.apply(_this, [getDateData(_this.options.date)]);
return _this;
};
this.stop = function () {
if (_this.interval) {
clearInterval(_this.interval);
}
_this.interval = null;
return _this;
};
this.start = function (refresh) {
if (refresh == null) {
refresh = _this.options.refresh || $.countdown.defaultOptions.refresh;
}
if (_this.interval) {
clearInterval(_this.interval);
}
_this.render();
_this.options.refresh = refresh;
_this.interval = setInterval(function () {
return _this.render();
}, _this.options.refresh);
return _this;
};
return this.init();
};
$.countdown.defaultOptions = {
date: "June 7, 2087 15:03:25",
refresh: 1000,
onEnd: $.noop,
render: function (date) {
return $(this.el).html("" + date.years + " years, " + date.days + " days, " + (this.leadingZeros(date.hours)) + " hours, " + (this.leadingZeros(date.min)) + " min and " + (this.leadingZeros(date.sec)) + " sec");
}
};
$.fn.countdown = function (options) {
return $.each(this, function (i, el) {
var $el;
$el = $(el);
if (!$el.data('countdown')) {
return $el.data('countdown', new $.countdown(el, options));
}
});
};
return void 0;
})(jQuery);
}).call(this);
Just change
endDate = Date.parse($.isPlainObject(_this.options.date)
? _this.options.date : new Date(_this.options.date));
to
endDate = Date.parse($.isPlainObject(_this.options.date)
? _this.options.date : new Date(year,month,date));
example:
endDate = Date.parse($.isPlainObject(_this.options.date)
? _this.options.date : new Date(2017,02,15));
I found a neat timer but I need to customize it a bit to work for my project, I tried to change javascript code so it would be a countdown until the weekend and start again from ex: 6days:23hours:59minutes, but I failed miserably
I also would like to know how possible could I add a third row called days
http://codepen.io/anon/pen/ZYEBjP
JS code
var Clock = (function(){
var exports = function(element) {
this._element = element;
var html = '';
for (var i=0;i<6;i++) {
html += '<span> </span>';
}
this._element.innerHTML = html;
this._slots = this._element.getElementsByTagName('span');
this._tick();
};
exports.prototype = {
_tick:function() {
var time = new Date();
this._update(this._pad(time.getHours()) + this._pad(time.getMinutes()) + this._pad(time.getSeconds()));
var self = this;
setTimeout(function(){
self._tick();
},1000);
},
_pad:function(value) {
return ('0' + value).slice(-2);
},
_update:function(timeString) {
var i=0,l=this._slots.length,value,slot,now;
for (;i<l;i++) {
value = timeString.charAt(i);
slot = this._slots[i];
now = slot.dataset.now;
if (!now) {
slot.dataset.now = value;
slot.dataset.old = value;
continue;
}
if (now !== value) {
this._flip(slot,value);
}
}
},
_flip:function(slot,value) {
// setup new state
slot.classList.remove('flip');
slot.dataset.old = slot.dataset.now;
slot.dataset.now = value;
// force dom reflow
slot.offsetLeft;
// start flippin
slot.classList.add('flip');
}
};
return exports;
}());
var i=0,clocks = document.querySelectorAll('.clock'),l=clocks.length;
for (;i<l;i++) {
new Clock(clocks[i]);
}
I would create a helper:
var TimeHelper = function(days, hours, minutes, callback) {
this.subtractMinute = function() {
minutes = (minutes + 60 - 1) % 60;
if (minutes === 0) {
hours = (hours + 60 - 1) % 60;
if (hours === 0) {
days = (days + 24 - 1) % 24;
if (days === 0) {
days = 24;
hours = 0;
minutes = 0;
}
}
}
callback(days, hours, minutes);
}
}
function refreshUI(days, hours, minutes) {
//refresh my ui elements
}
var timeHelper = new TimeHelper(24, 0, 0);
And then you can call timeHelper.subtractMinute once/minute this on every minute
I've searched all over the web, and all I'm getting is results to make new countdowns and not integrate in timezones into my jquery countdown which isn't what I'm looking for, since I'm looking to integrate the new js into my current countdown design.
Below is my js and html code I currently have which counts down from the users computer time, not from a specific timezone time.
Can someone tell me what code to input to make it based on a specified time zone (eg +8:00)
Thanks in advance:
HTML:
<div id="counter" class="counter" data-date="July 13, 2015">
<div class="timer-col"> <span id="days"></span> <span class="timer-type">d</span> </div>
<div class="timer-col"> <span id="hours"></span> <span class="timer-type">h</span> </div>
<div class="timer-col"> <span id="minutes"></span> <span class="timer-type">m</span> </div>
<div class="timer-col"> <span id="seconds"></span> <span class="timer-type">s</span> </div>
</div>
JS:
(function($) {
$.fn.countdown = function(toDate, callback) {
var handlers = ['seconds', 'minutes', 'hours', 'days', 'weeks', 'daysLeft'];
function delegate(scope, method) {
return function() { return method.call(scope) }
}
return this.each(function() {
// Convert
if(!(toDate instanceof Date)) {
if(String(toDate).match(/^[0-9]*$/)) {
toDate = new Date(toDate);
} else if( toDate.match(/([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2,4})\s([0-9]{1,2})\:([0-9]{2})\:([0-9] {2})/) ||
toDate.match(/([0-9]{2,4})\/([0-9]{1,2})\/([0-9]{1,2})\s([0-9]{1,2})\:([0-9]{2})\:([0-9]{2})/)
) {
toDate = new Date(toDate);
} else if(toDate.match(/([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2,4})/) ||
toDate.match(/([0-9]{2,4})\/([0-9]{1,2})\/([0-9]{1,2})/)
) {
toDate = new Date(toDate)
} else {
throw new Error("Doesn't seen to be a valid date object or string")
}
}
var $this = $(this),
values = {},
lasting = {},
interval = $this.data('countdownInterval'),
currentDate = new Date(),
secondsLeft = Math.floor((toDate.valueOf() - currentDate.valueOf()) / 1000);
function triggerEvents() {
secondsLeft--;
if(secondsLeft < 0) {
secondsLeft = 0;
}
lasting = {
seconds : secondsLeft % 60,
minutes : Math.floor(secondsLeft / 60) % 60,
hours : Math.floor(secondsLeft / 60 / 60) % 24,
days : Math.floor(secondsLeft / 60 / 60 / 24),
weeks : Math.floor(secondsLeft / 60 / 60 / 24 / 7),
daysLeft: Math.floor(secondsLeft / 60 / 60 / 24) % 7
}
for(var i=0; i<handlers.length; i++) {
var eventName = handlers[i];
if(values[eventName] != lasting[eventName]) {
values[eventName] = lasting[eventName];
dispatchEvent(eventName);
}
}
if(secondsLeft == 0) {
stop();
dispatchEvent('finished');
}
}
triggerEvents();
function dispatchEvent(eventName) {
var event = $.Event(eventName);
event.date = new Date(new Date().valueOf() + secondsLeft);
event.value = values[eventName] || "0";
event.toDate = toDate;
event.lasting = lasting;
switch(eventName) {
case "seconds":
case "minutes":
case "hours":
event.value = event.value < 10 ? '0'+event.value.toString() : event.value.toString();
break;
default:
if(event.value) {
event.value = event.value.toString();
}
break;
}
callback.call($this, event);
}
$this.bind('remove', function() {
stop(); // If the selector is removed clear the interval for memory sake!
dispatchEvent('removed');
});
function stop() {
clearInterval(interval);
}
function start() {
$this.data('countdownInterval', setInterval(delegate($this, triggerEvents), 1000));
interval = $this.data('countdownInterval');
}
if(interval) stop();
start();
});
}
// Wrap the remove method to trigger an event when called
var removeEvent = new $.Event('remove'),
removeFunction = $.fn.remove;
$.fn.remove = function() {
$(this).trigger(removeEvent);
return removeFunction.apply(this, arguments);
}
})(jQuery);