Change color depending on remaining time - javascript

I were wondering if there was a simple way to change the color on a countdown-timer (I want the color on the timer to change into red once there is less than 12 hours left)
CountDownTimer('09/09/2013 23:59', 'countdown');
CountDownTimer('09/11/2013 15:30', 'countdown2');
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 = '<span class=exp>Utgått!</span>';
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 + ' Dager ';
document.getElementById(id).innerHTML += hours + ' Timer ';
document.getElementById(id).innerHTML += minutes + ' Minutter ';
}
timer = setInterval(showRemaining, 1000);
}
This is the code I'm using.
In advance, thank you :)

Simply add the following line:
document.getElementById(id).style.color = days === 0 && hours < 12 ? 'red' : '';
JS Fiddle demo.
Which will set the color of the containing element to 'red' if there are zero days and less than twelve hours left, or set it to nothing (passing an empty string) if there are one, or more, days or twelve, or more, hours left.
Though I would suggest caching the element you're using once and then using that, rather than re-querying the DOM every time:
var cachedEl = document.getElementById(id);
/* all the other stuff... */
cachedEl.innerHTML = days + ' Dager ';
cachedEl.innerHTML += hours + ' Timer ';
cachedEl.innerHTML += minutes + ' Minutter ';
cachedEl.innerHTML += seconds + ' Seconds. ';
cachedEl.style.color = days === 0 && hours < 12 ? 'red' : '';
JS Fiddle demo.

Related

Javascript code do not count date properly

I am using this code in order to countdown a date:
function countdown()
{
var now = new Date();
var end = new Date('Mars 13, 2016 13:12:12'),
$.each(times, function( key, value ) {
var left = end - now;
var days = Math.floor( left / (1000 * 60 * 60 * 24) );
var hours = Math.floor( (left % (1000 * 60 * 60 * 24) ) / (1000 * 60 * 60) );
var minutes = Math.floor( (left % (1000 * 60 * 60)) / (1000 * 60) );
var seconds = Math.floor( (left % (1000 * 60)) / 1000 );
displayTime = '';
if (days > 0) {
displayTime = days+' days';
}
displayTime = displayTime + ' ' +hours+' Hours ' + minutes+' Minutes ' + seconds+'s';
$('#cont'+value.id).text(displayTime)
});
}
But it doesn't counts it properly since it is not considering if month have 31 days, 28/29 days ...
And the second thing is that when it reaches the expiring date, It does not stops and continues to count down below zero.
What have i done wrong, and how to fix it please ?
The way that I do countdowns is to create a countdown initiation script called countdown.js, and then include this script in your main page with the script tag's src="countdown.js"
Here is the code for countdown.js
CountDownTimer('12/25/2016 12:0 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 = 'Merry Christmas!';
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);
if(hours < 10){
hours = "0"+hours;
}
if(minutes < 10){
minutes = "0"+minutes;
}
if(seconds < 10){
seconds = "0"+seconds;
}
document.getElementById(id).innerHTML = "<span id='daycount'>" + days + ' days</span><br/>';
document.getElementById(id).innerHTML += hours + ':';
document.getElementById(id).innerHTML += minutes + ':';
document.getElementById(id).innerHTML += seconds + '';
}
timer = setInterval(showRemaining, 1000);
}
Now on your main page
Include the countdown script with <script src="countdown.js"></script> in your <head>.
Then create a div with id="countdown".
The countdown div's id is defined by the first line of the countdown.js script, as the second function input for CountDownTimer();.
My code is set to count down to christmas, you change change this date and time easily by modifying the first line of countdown.js to suit your date needs. Make sure you use the same format as the supplied date though! mm/dd/yyyy H:m AM/PM
You should not parse strings with the Date constructor (or Date.parse, they are equivalent for parsing). Either write a small function yourself or use a library.
Also, if your code depends on a particular library, you should include a tag for that. There are many posts here on how to create a timer.
The code you've posted does not have any months so it's unclear why you're having an issue with them. Perhaps you want to count down years, moths, days, etc.? That's a much more difficult issue than just days, hours, etc. and there are questions and answers for that too.
var countDown = (function() {
var endDate;
return function(eDate) {
endDate = endDate || eDate;
var msg = '';
var now = Date.now();
var r = endDate - now;
var d, h, m, s;
if (r <= 1000) {
msg = 'Finished!';
} else {
d = r / 8.64e7 | 0;
h = r % 8.64e7 / 3.6e6 | 0;
m = r % 3.6e6 / 6e4 | 0;
s = r % 6e4 / 1000 | 0;
msg = (d? d + ' day' + (d == 1? '':'s') + ', ' : '') +
h + ' hour' + (h==1?'':'s') + ', ' +
m + ' minute' + (m==1?'':'s') + ' and ' +
s + ' second' + (s==1?'':'s');
}
document.getElementById('counter').textContent = msg;
var lag = 1010 - (Date.now() % 1000);
if (r > 0) {
setTimeout(countDown, lag);
}
}
}());
countDown(new Date(2016,11,25));
<span id="counter"></span>

Birthday Countdown

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>

Multiple JavaScript countdown dates?

So I currently have one date, but I want multiple and for them to have unique id's.
I can currently use <div id="countdown"></div> to put it in my html, but I want to do something like id="countdown1", id="countdown2", id="countdown3", etc.
To explain more in depth i'm trying to have several dates like this with unique id's for each one so I can put each individual one in the html.
var end = new Date(Date.UTC(2015, 10, 10));
var end = new Date(Date.UTC(2015, 10, 11));
var end = new Date(Date.UTC(2015, 10, 12));
var end = new Date(Date.UTC(2015, 10, 13));
This is my current script:
var end = new Date(Date.UTC(2015, 10, 10, 5));
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 + ' Day | ';
document.getElementById('countdown').innerHTML += hours + ' Hours | ';
document.getElementById('countdown').innerHTML += minutes + ' Minutes | ';
document.getElementById('countdown').innerHTML += seconds + ' Seconds ';
}
timer = setInterval(showRemaining, 1000);
I tried a lot of different things and searched many times for a solution but have found nothing. Any help on this would be very appreciated.
Use object, it is a cleaner solution.
function Timer(holder) {
var controller = {
holder: holder,
end: null,
intervalID:0,
display: function () {
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var msg = "";
var now = new Date();
var distance = controller.end - now;
if (distance < 0) {
clearInterval(controller.intervalID);
controller.holder.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);
controller.holder.innerHTML = days + ' Day | ' + hours + ' Hours | ' + minutes + ' Minutes | ' + seconds + ' Seconds ';
}
}
this.countDown = function (end) {
controller.end = end;
controller.intervalID = setInterval(controller.display, 1000);
}
}
Working sample at https://jsfiddle.net/mLr571tj/
EDIT: Make sure you use the same date time format on initialization and in display function.
Try scoping the variables to the function and returning it once it's called. I made an example for you:
http://jsfiddle.net/wt9pb9r3/1/
I use setTimeoutto simulate the dates being initiated a few seconds apart.

Countdown keeps changing

Right, basically I have a countdown timer that doesn't do exactly what it says on the tin.
The PHP outputs correctly, but once it's echo'd within the Javascript, the date constantly changes.
I will load the page, and it will show one ETA, and I'll refresh and it could jump forward an hour or jump back several hours?
I just need the timer to countdown to the 20th March 2015.
The PHP Code
<?php
$futureDate = '2015-03-20';
$d = new DateTime($futureDate);
?>
The Javascript
$('#counter').countdown({
timestamp : (new Date()).getTime() + <?php echo $d->diff(new DateTime())->format('%a*%h*%i*%s*1000'); ?>
});
Here's a Live Preview
Preview
Please, somebody help lol
you can use something like this in javascript
how to countdown to a date
var end = new Date('03/20/2015 0:0 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('counter').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('counter').innerHTML = days + 'days ';
document.getElementById('counter').innerHTML += hours + 'hrs ';
document.getElementById('counter').innerHTML += minutes + 'mins ';
document.getElementById('counter').innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
Replace your javascript with
$('#counter').countdown({
timestamp : new Date('2015/03/20')
});
As it is now you're overcomplicating things - you just need to set the date of the countdown to when you want it to finish.

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.

Categories

Resources