Develop Reference

JS countdown in HTML

For a website, I need a countdown to a specific date. I tried to write such a code by myself in Javascript, but I failed. So I searched for a template. I found one on Stack Overflow and it worked really good. But I have one problem. I need to format the days, hours, minutes and the seconds seperately. In the code I found, everything is written by the Javascript into one single div. So I want the Javascript to edit all 4 divs seperately (days, hrs, mins, secs). Can someone help me please?
<script>
var end = new Date('07/16/2017 00:00 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = days + 'days ';
document.getElementById('countdown').innerHTML += hours + 'hrs ';
document.getElementById('countdown').innerHTML += minutes + 'mins ';
document.getElementById('countdown').innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
</script>
<div id="countdown">
<div id="days"></div>
<div id="hrs"></div>
<div id="mins"></div>
<div id="secs"></div>
</div>

All you have to change is :
document.getElementById('countdown').innerHTML = days + 'days ';
document.getElementById('countdown').innerHTML += hours + 'hrs ';
document.getElementById('countdown').innerHTML += minutes + 'mins ';
document.getElementById('countdown').innerHTML += seconds + 'secs';
Give the correct div id instead of countdown for all and change .innerHTML += to .innerHTML =
<script>
var end = new Date('07/16/2017 00:00 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('days').innerHTML = days + 'days ';
document.getElementById('hrs').innerHTML = hours + 'hrs ';
document.getElementById('mins').innerHTML = minutes + 'mins ';
document.getElementById('secs').innerHTML = seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
</script>
<div id="countdown">
<div id="days"></div>
<div id="hrs"></div>
<div id="mins"></div>
<div id="secs"></div>
</div>

Hope can help!
link run online : https://jsbin.com/sivejolapi/edit?html,output
<script>
var end = new Date('07/16/2017 00:00 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('days').innerHTML = days + 'days ';
document.getElementById('hrs').innerHTML = hours + 'hrs ';
document.getElementById('mins').innerHTML = minutes + 'mins ';
document.getElementById('secs').innerHTML = seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
</script>
<div class="countdown">
<div id="days"></div>
<div id="hrs"></div>
<div id="mins"></div>
<div id="secs"></div>
</div>
`

Issue with countdown

I have a countdown timer on my web page. But I can't make it to work properly.
I have an end date - it's March 01, 2017.
And I have a current date:
var now = Date.now()
This is my whole code for this javascript:
CountDownTimer(1488326400000, 'clockdiv');
function CountDownTimer(dt, id)
{
var end = new Date(dt);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function showRemaining() {
if (!Date.now) {
Date.now = function() { return new Date().getTime(); }
}
// var now = new Date();
var now = Date.now()
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById(id).innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
daysSpan.innerHTML = ('0' + days).slice(-2);
hoursSpan.innerHTML = ('0' + hours).slice(-2);
minutesSpan.innerHTML = ('0' + minutes).slice(-2);
secondsSpan.innerHTML = ('0' + seconds).slice(-2);
// document.getElementById(id).innerHTML = days + 'days ';
// document.getElementById(id).innerHTML += hours + 'hrs ';
// document.getElementById(id).innerHTML += minutes + 'mins ';
// document.getElementById(id).innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
}
The script showing me 26 days until the end date. It's not correct.
What is the mistake?

This is cutting off the days to 2 characters:
daysSpan.innerHTML = ('0' + days).slice(-2);
Just do:
daysSpan.innerHTML = days;

Unable to update multiple div with same id

I'm trying to develop a countdown timer which displays sales on my webpage on different locations (all the divs are being managed using PHP). All the countdown timers have same id and exists within same page.
When i try to update content of all countdown using id, it works only for first div.
<html>
<head> </head>
<body>
<p id="countdown"></p>
<p id="countdown"></p>
<p id="countdown"></p>
<p id="countdown"></p>
<p id="countdown"></p>
<p id="countdown"></p>
<script>
var end = new Date('03/24/2016 08:00 PM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = days + ' Days ';
document.getElementById('countdown').innerHTML += hours + ' Hours ';
document.getElementById('countdown').innerHTML += minutes + ' Mins ';
document.getElementById('countdown').innerHTML += seconds + ' Secs';
}
timer = setInterval(showRemaining, 1000);
</script>
</body>
</html>

Id must be unique. You can use class instead. You can get all elements by class name using document.getElementsByClassName. After that you can use Array.prototype.forEach to iterate over all elements and set innerHTML property.
<p class="countdown"></p>
<p class="countdown"></p>
<p class="countdown"></p>
<p class="countdown"></p>
<p class="countdown"></p>
<p class="countdown"></p>
<script>
var end = new Date('03/24/2016 08:00 PM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function setAllCountdownInnerHtml(html) {
var allElements = document.getElementsByClassName('countdown');
Array.prototype.forEach.call(allElements, function(ele) {
ele.innerHTML = html;
});
}
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
setAllCountdownInnerHtml('EXPIRED!');
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
var html = days + ' Days ' + hours + ' Hours ' + minutes + ' Mins ' + seconds + ' Secs';
setAllCountdownInnerHtml(html);
}
timer = setInterval(showRemaining, 1000);
</script>
See demo here https://jsfiddle.net/v3y4b3ux/

Rename your ids to be unique...
<p id="countdown1"></p>
<p id="countdown2"></p>
<p id="countdown3"></p>
<p id="countdown4"></p>
<p id="countdown5"></p>
then use a for loop to write to each one separately...
var time = days + ' Days ' + hours + ' Hours ' + minutes + ' Mins ' + seconds + ' Secs';
for(var i = 1; i < 6; i++){
document.getElementById('countdown' + i).innerHTML = time;
}

Reset and restart javascript countdown (loop)

I have this pure JavaScript countdown based on date object all working fine except that I wanted the countdown to keep running.
JSFiddle sample
//the countdown part
var d = new Date();
var theDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
var newTime = new Date(Date.parse(d) + secs * 1000);
//var end = new Date('02/08/2016 10:00:00');
var end = newTime;
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
if (timer) clearInterval(timer);
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'this is the callback from here should reset and starts again';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = days + 'days ';
document.getElementById('countdown').innerHTML += hours + 'hrs ';
document.getElementById('countdown').innerHTML += minutes + 'mins ';
document.getElementById('countdown').innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);

In the if (distance < 0) branch, you simply need to remove clearInterval and reset the end variable.
Something like this:
if (distance < 0) {
d = new Date();
theDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
newTime = new Date(Date.parse(d) + secs * 1000);
end = newTime;
return;
}

how to countdown to a date

I am wondering if anyone can help me. After hours of searching tirelessly on here and the web I can't seem to find a simple countdown using jquery. I don't want to use any sort of plugin just a simple jquery code to countdown from a date. I have managed to find this code below. But even with this code placing it in my website nothing appears. I added the jquery file from jquery.com and added the proper divs with counter ID and nothing. If anyone can explain or show me how to make a simple countdown in a function that takes in a date format and returns a countdown I would appreciate the help.
var end = new Date('02/19/2012 10:1 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = days + 'days ';
document.getElementById('countdown').innerHTML += hours + 'hrs ';
document.getElementById('countdown').innerHTML += minutes + 'mins ';
document.getElementById('countdown').innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);

This is working fine as a normal javascript.
<script>
var end = new Date('02/19/2012 10:1 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = days + 'days ';
document.getElementById('countdown').innerHTML += hours + 'hrs ';
document.getElementById('countdown').innerHTML += minutes + 'mins ';
document.getElementById('countdown').innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
</script>
<div id="countdown"></div>
Your output is appearing as follows:-
1days 9hrs 3mins 22secs
UPDATE
Using Functions:
<script>
CountDownTimer('02/19/2012 10:1 AM', 'countdown');
CountDownTimer('02/20/2012 10:1 AM', 'newcountdown');
function CountDownTimer(dt, id)
{
var end = new Date(dt);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById(id).innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById(id).innerHTML = days + 'days ';
document.getElementById(id).innerHTML += hours + 'hrs ';
document.getElementById(id).innerHTML += minutes + 'mins ';
document.getElementById(id).innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
}
</script>
<div id="countdown"></div>
<div id="newcountdown"></div>
Output will appear as follows:-
0days 23hrs 25mins 8secs
1days 23hrs 25mins 8secs

That's not jQuery, that's JavaScript. But anyways...
You almost got it. The only issue is var distance = end-now;. It should be:
var distance = end.getTime()-now.getTime();
Also, you shouldn't use += on innerHTML. Instead, use a variable (example: var output = "") and add to that, then assign to the innerHTML at the end.
Finally, double-check that the ID of the div matches the ID you have in getElementById.

Here is my contribution for the sake of new readers of this post.
I am using setTimeout instead of setInterval so that we can easily update the target date while it is still counting down. I will also include the time of the target day for a better precision and the time will be local. So i guess this covers most of the possible requirements to start with.
function refreshTimer(){
function countDown(){
setTimeout(function(now){
var dif = (td-now)/1000,
ss = Math.floor(dif % 60).toString().padStart(2,"0"),
ms = Math.floor(dif/60 % 60).toString().padStart(2,"0"),
hs = Math.floor(dif/3600 % 24).toString().padStart(2,"0"),
ds = Math.floor(dif/86400).toString().padStart(3,"0");
remainingTime.textContent = dif > 0 ? `${ds} Days ${hs}:${ms}:${ss}`
: "Sorry. You are already late..!";
active && countDown();
this.removeEventListener("change", kill); // possibly redundant
}, 1000, Date.now());
}
var td = new Date(this.value),
active = true,
kill = _ => active = false;
this.addEventListener("change", kill);
countDown();
}
var targetDateTime = document.getElementById("targetDateTime"),
remainingTime = document.getElementById("remainingTime");
targetDateTime.addEventListener("change",refreshTimer);
<input id="targetDateTime" type="datetime-local">
<p id="remainingTime"></p>
It would be ideal to have the days, hours, minutes and seconds in their own <div>s or <span>s for a better display in which case updating them individually would be another task.