Issue with countdown

Issue with countdown - javascript

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;

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>

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

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>

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

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>

Develop Reference

JavaScript is the programming language of the Web.

Issue with countdown - javascript

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

Related

Showing a countdown when there are less than 24 hours remaining

JS countdown in HTML

Replace numbers in countdown JS

Reset and restart javascript countdown (loop)

Multiple countdown timer in onepage using javascript with setintervals

Categories

Resources