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>
i want to make javascript countdown which takes SQL server DateTime as endtime and C# datetime as time which i will substract from SQL server endtime here is code
<script>
var EndTime = #Context.Session.GetString("EndTime");
var nowtime = #DateTime.Now.ToString();
var difference = EndTime - nowtime;
var initialTime = difference ;
var seconds = initialTime;
function timer() {
var days = Math.floor(seconds / 24 / 60 / 60);
var hoursLeft = Math.floor((seconds) - (days * 86400));
var hours = Math.floor(hoursLeft / 3600);
var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
var minutes = Math.floor(minutesLeft / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = days + "dias " + hours + "horas " + minutes + "minutos " + remainingSeconds + "segundos";
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);
</script>
<span id="countdown" class="timer"></span>
#Context.Session.GetString("EndTime") this is datetime from SQL server
adding datetimes this way to Javascript is not working need some help THX.
<span id="countdown" class="timer"></span>
<script>
var t1 = "#Context.Session.GetString("EndTime")";
var endTime = new Date(t1);
var t2 = "#DateTime.Now.ToString()";
var nowTime = new Date(t2);
var initialTime = (endTime - nowTime)/1000;
var seconds = initialTime;
function timer() {
var days = Math.floor(seconds / 24 / 60 / 60);
var hoursLeft = Math.floor((seconds) - (days * 86400));
var hours = Math.floor(hoursLeft / 3600);
var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
var minutes = Math.floor(minutesLeft / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = days + "dias " + hours + "horas " + minutes + "minutos " + remainingSeconds + "segundos";
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);
</script>
I remembered how i had it done this works in my case THX all.
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;
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>
Im trying to write a program where the user enters their birthday and a countdown timer appears and counts down the months days hours and seconds until their birthday. Right now it is not not working and any help would be great! Thanks!
<body>
<script>
var end = new Date();
document.getElementById("myDate").value = end;
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var _month = _day * 30;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var months = Math.floor(distance / _month);
var days = Math.floor((distance % _month) / _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 = months + 'months ';
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>
Enter your birthday:
<br>
<input type="date" id="myDate">
<br>
<br>
<input type="button" onclick="showRemaining()" value="Enter">
<div id="countdown"></div>
</body>
There are a number of issues with your code as identified in other answers, I'll paraphrase:
The script runs before the elements exist in the DOM, so attempts to reference them return null and you'll get errors attempting to set its properties.
end is set as the page loads, so it's always in the past in respect to when the function runs, so end - now is either
zero (probably initially) or negative (more than 1 millisecond after assigning to end).
The button will allow multiple instance of setInterval to be running, so you'll get some pretty confusing results since they're all trying to set the value of countdown
The calculation is flawed as there aren't exactly 30 days in every month, nor 24 hours in every day if the host observes daylight saving. Fixing that isn't hard, but I'm not going to fix it here.
Don't use input type Date, support is patchy. You can test for support and handle cases where it isn't, but it's all a bit much for this exercise.
So, don't start the timer until the button is pressed (or some other event after the page is loaded), stop any timer that is currently running and reset end at the same time.
Note that setInterval will drift as it doesn't run at exactly every second, so every now and then it will skip two seconds. Also, invalid date input should be dealt with. Both can be fixed, but out of scope here. ;-)
// Don't set the value for end until the button is pressed.
var end; // = new Date();
// document.getElementById("myDate").value = end;
// Also need a global timer reference so it can be cancelled when required
var timer;
// Since listener is attached by addEventListener, event will only be passed
// if the call comes from the button
function showRemaining(event) {
// Function to cancel the timer
function stopTimer(){
if (timer) {
clearInterval(timer);
end = timer = null;
}
}
// Keep these local
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var _month = _day * 30;
// If click came from the button or timer isn't set, restart the timer
if (event || !timer) {
stopTimer();
timer = setInterval(showRemaining, 1000);
}
// Get the current date
var now = new Date();
// Get the value of countdown and parse it, see parsing function
// If end isn't set, set it
if (!end) end = parseDateDMY(document.getElementById("myDate").value);
var distance = end - now;
// If gone past end, stop the timer
if (distance < 0) {
stopTimer();
document.getElementById('countdown').innerHTML = 'EXPIRED!';
} else {
var months = Math.floor(distance / _month);
var days = Math.floor((distance % _month) / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
// Write the time remaining directly to the element
document.getElementById('countdown').innerHTML = months + 'months ' +
days + 'days ' +
hours + 'hrs ' +
minutes + 'mins ' +
seconds + 'secs';
}
}
// No need to do this, wait for button click
// timer = setInterval(showRemaining, 1000);
// Parse date string in format d/m/y
function parseDateDMY(s) {
var b = s.split(/\D/);
var d = new Date(b[2], --b[1], b[0]);
return d && d.getMonth() == b[1]? d : new Date(NaN);
}
// Add listener to button
window.onload = function() {
document.getElementById('startButton').addEventListener('click',showRemaining,false);
}
Enter your birthday:<br>
<input type="text" id="myDate" value="21/6/2016">d/m/y<br>
<input type="button" id="startButton" value="Start counting"><br>
<div id="countdown"></div>
You have made quite a few mistakes,
The script loads before the elements load. So, it does not work properly. Always incude scripts at the last or use window.onload = (function() { [Your code] }());. This executes only after the dom loads.
The setInterval function must always execute only if "not EXPIRED!". Keep it within the function so it only runs again if the countdown must go on.
The main problem, you were comparing date strings to 0. You can rather use
Date.now() which returns the total milliseconds from Jan 1, 1970. And use Date("User Input String which you provided") to get the total milliseconds from Jan 1, 1970 till that date and see the difference which is very accurate.
I recommend using separate input boxes or a more formatted input. Read more about these here.
Also try using 'buttonElement.addEventListener("click", showRemaining);`.
This should work:
<body>
<script>
var end = new Date();
document.getElementById("myDate").value = end;
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var _month = _day * 30;
var timer;
function showRemaining() {
var now = Date.now(); //CHANGE
end = new Date(document.getElementById("myDate").value); //CHANGE
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var months = Math.floor(distance / _month);
var days = Math.floor((distance % _month) / _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 = months + 'months ';
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); //CHANGE
}
</script>
<!-- CHANGE -->
Enter your birthday:
<br />
<input type="date" id="myDate">
<br /><br />
<input type="button" onclick="showRemaining()" value="Enter">
This snippet fixes your issue. The issue was two-fold.
document.getElementById("myDate").value = end; This statement is reversed. You want need the value of the field to be put into end. This statement also executes immediately, which is of no use. This has been replaced by two things (1) the initDate function, to make the date field have an initial value (if that's what you were trying to do), and (2) the event listener on the button. This way, when the user has selected a date and clicks the button, you know that a value has been set, and can confidently start the timer.
Dates. The date value given by the input you have is in the format YYYY-mm-dd, which needs to be split() on the hyphens to create a new Date() correctly. The Date library can be tricky to work with. When creating dates it can be hard to determine if they're going to be UTC or local. And that issue can screw you up pretty easily, so watch that.
This code should be what you're looking for and should help clarify some of the points you may not have understood when writing the original code. It's not perfect necessarily (due to the fact that a month is hardcoded in as 30 days), but it depends on what you are looking for. Let me know if you have any other questions.
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var _month = _day * 30;
var timer;
initDate();
document.getElementById('startButton').addEventListener("click", function() {
document.getElementById('value').innerHTML = document.getElementById("myDate").value;
var splitValues = document.getElementById("myDate").value.split('-');
var end = new Date(splitValues[0], splitValues[1] - 1, splitValues[2]);
clearInterval(timer);
showRemaining(end);
timer = setInterval(showRemaining, 1000, end);
});
function showRemaining(end) {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var months = Math.floor(distance / _month);
var days = Math.floor((distance % _month) / _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 = months + 'months ';
document.getElementById('countdown').innerHTML += days + 'days ';
document.getElementById('countdown').innerHTML += hours + 'hrs ';
document.getElementById('countdown').innerHTML += minutes + 'mins ';
document.getElementById('countdown').innerHTML += seconds + 'secs';
}
function initDate() {
var defaultDate = new Date();
var month;
if(defaultDate.getMonth() + 1 > 9) {
month = "" + (defaultDate.getMonth() + 1);
} else {
month = '0' + (defaultDate.getMonth() + 1);
}
document.getElementById("myDate").value = defaultDate.getFullYear() + '-' + month + '-' + defaultDate.getDate();
}
<input id="myDate" type="date">
<button id="startButton">Start Countdown</button>
<div id="value"></div>
<div id='countdown'></div>
I have included the "more accurate" version below, since it was easy to change.
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
initDate();
document.getElementById('startButton').addEventListener("click", function() {
document.getElementById('value').innerHTML = document.getElementById("myDate").value;
var splitValues = document.getElementById("myDate").value.split('-');
var end = new Date(splitValues[0], splitValues[1] - 1, splitValues[2]);
clearInterval(timer);
showRemaining(end);
timer = setInterval(showRemaining, 1000, end);
});
function showRemaining(end) {
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';
}
function initDate() {
var defaultDate = new Date();
var month;
if (defaultDate.getMonth() + 1 > 9) {
month = "" + (defaultDate.getMonth() + 1);
} else {
month = '0' + (defaultDate.getMonth() + 1);
}
document.getElementById("myDate").value = defaultDate.getFullYear() + '-' + month + '-' + defaultDate.getDate();
}
<input id="myDate" type="date">
<button id="startButton">Start Countdown</button>
<div id="value"></div>
<div id='countdown'></div>