JS countdown in HTML

JS countdown in HTML - javascript

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>
`

Related

Showing a countdown when there are less than 24 hours remaining

I am trying to get my countdown clock to appear only when there are less than 24 hours remaining.
I didn't write the original code. I think it should be...
if (distance < end + ???) {
But i'm not sure what to add ???. Here is the full code...
var end = new Date('05/03/2020 20:00 UTC+1');
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;
// When countdown over show finished
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML =
"Finished!";
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);
// Only show countdown is less than 24 hours remains
if (distance < end + ???) {
// document.getElementById('countdown').innerHTML = days + ':';
document.getElementById('countdown').innerHTML = hours + ' : ';
document.getElementById('countdown').innerHTML += minutes + ' : ';
document.getElementById('countdown').innerHTML += seconds + '';
}
}
timer = setInterval(showRemaining, 1000);
https://jsfiddle.net/yvb4dahn/3/

It works if you change your condition to this one if (distance < 86400000) {. That number is 24h in milliseconds.
var end = new Date('05/03/2020 10:00 UTC+1');
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;
// When countdown over show finished
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML =
"Finished!";
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);
// Only show countdown is less than 24 hours remains
if (distance < 86400000) {
// document.getElementById('countdown').innerHTML = days + ':';
document.getElementById('countdown').innerHTML = hours + ' : ';
document.getElementById('countdown').innerHTML += minutes + ' : ';
document.getElementById('countdown').innerHTML += seconds + '';
}
}
timer = setInterval(showRemaining, 1000);
<div id="countdown"></div>
More info about js dates and formats:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
Hope it helped you :)

You can use this to calculate difference in time:
var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date('05/03/2020 20:00 UTC+1');
var secondDate = new Date();
var diffDays = Math.round(Math.abs((firstDate - secondDate) / oneDay));
This will give you result of 1.
So what you need to to is:
if (diffDays < 2 && diffDays > 0)
It will start only if one day is remaining.
var end = new Date('05/03/2020 20:00 UTC+1');
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;
// When countdown over show finished
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML =
"Finished!";
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);
// Only show countdown is less than 24 hours remains
var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date('05/03/2020 20:00 UTC+1');
var secondDate = new Date();
var diffDays = Math.round(Math.abs((firstDate - secondDate) / oneDay));
if (diffDays < 2 && diffDays > 0) {
// document.getElementById('countdown').innerHTML = days + ':';
document.getElementById('countdown').innerHTML = hours + ' : ';
document.getElementById('countdown').innerHTML += minutes + ' : ';
document.getElementById('countdown').innerHTML += seconds + '';
}
}
timer = setInterval(showRemaining, 1000);
<div id="countdown"></div>

Replace numbers in countdown JS

Im sitting in a project, where i would like to display images instead of the numbers. But i can't figure out if it is possible in a JS countdown.
At the moment my code looks like this, but i don't get any results.
Hope somebody can help me?
<div id="countdown" onload="myFunction"></div>
<div id="newcountdown"></div>
CountDownTimer('02/19/2017 10:1 AM', 'countdown');
CountDownTimer('02/20/2017 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);
}
(function myFunction() {
var str = document.getElementById("countdown").innerHTML;
var res = str.replace("2", "W3Schools");
document.getElementById("countdown").innerHTML = res;}

You want to
remove the line with the replace
change
document.getElementById(id).innerHTML = days + 'days ';
document.getElementById(id).innerHTML += hours + 'hrs ';
document.getElementById(id).innerHTML += minutes + 'mins ';
document.getElementById(id).innerHTML += seconds + 'secs';
to
document.getElementById(id).innerHTML = getImg(days) + 'days ';
document.getElementById(id).innerHTML += getImg(hours) + 'hrs ';
document.getElementById(id).innerHTML += getImg(minutes) + 'mins ';
document.getElementById(id).innerHTML += getImg(seconds) + 'secs';
and have
function getImg(num) {
var digits = String(num).split(""), text="";
for (var i=0;i<digits.length;i++) {
text += '<img src="'+digits[i]+'.gif" />';
}
return text;
}
and have 0.gif, 1.gif ... 9.gif on your server
function getImg(num) {
var digits = String(num).split(""), text="";
for (var i=0;i<digits.length;i++) {
text += '<img alt="'+digits[i]+'" src="'+digits[i]+'.gif" />';
}
return text;
}
CountDownTimer('02/19/2017 10:1 AM', 'countdown');
CountDownTimer('02/20/2017 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= getImg(days) + 'days '
+ getImg(hours) + 'hrs '
+ getImg(minutes) + 'mins '
+ getImg(seconds) + 'secs';
}
timer = setInterval(showRemaining, 1000);
}
<div id="countdown"></div>
<div id="newcountdown"></div>

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;
}

Multiple countdown timer in onepage using javascript with setintervals

I am displaying countdown timer for one post at a time.
How to display multiple countdown timers to all posts which are coming from while loop.
each post having one date so
var end = new Date('10/19/2014 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('days').innerHTML = days + 'days ';
// document.getElementById('hours').innerHTML += hours + 'hrs ';
// document.getElementById('min').innerHTML += minutes + 'mins ';
//document.getElementById('countdown').innerHTML += seconds + 'secs';
document.getElementById('days').innerHTML = days ;
document.getElementById('hours').innerHTML = hours;
document.getElementById('min').innerHTML = minutes;
}
timer = setInterval(showRemaining, 1000);
<span id="days"></span><span class="body_txt6">Days</span> <span id="hours"></span><span class="body_txt6">h</span> : <span id="min"></span><span class="body_txt6">m</span></p>
by using that date display countdown time.

$(document).ready(function() {
$(".ghomelistingse1").each(function() {
var str_enddate = $(this).html();
var end = new Date(str_enddate);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var now = new Date();
var distance = end - now;
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);
if (distance < 0) {
$(this).html("Expired");
}
else{
countdown($(this), days, hours, minutes, seconds);
}
});
function countdown(element, days, hours, minutes, seconds) {
var interval = setInterval(function() {
if(seconds == 0) {
if(minutes == 0) {
if(hours == 0) {
if(days == 0) {
return;
}
else {
days--;
hours = 23;
minutes = 59;
hours = 60;
}
}
else {
hours--;
minutes = 59;
seconds = 60;
}
}
else {
minutes--;
seconds = 60;
}
}
seconds--;
element.html(days + "d " + hours + "h " + minutes + "m " + seconds + "s");
}, 1000);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Month/ Date / Year
Example: 10/25/2014
<br/>
Date: 09/29/2014 <br/>
<span class="ghomelistingse1">09/29/2014</span>
<hr>
Date: 11/19/2014 <br/>
<span class="ghomelistingse1">11/19/2014</span>
<hr>
Date: 10/24/2014 <br/>
<span class="ghomelistingse1">10/24/2014</span>

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.

Develop Reference

JavaScript is the programming language of the Web.

JS countdown in HTML - javascript

Related

Showing a countdown when there are less than 24 hours remaining

Replace numbers in countdown JS

Unable to update multiple div with same id

Multiple countdown timer in onepage using javascript with setintervals

how to countdown to a date

Categories

Resources