So I have an array of dates and want to get the current date and put it into a countdown clock
I have this code atm:
<script>
var dates = [
'24/5/2017',
'12/6/2017',
'14/6/2017',
'16/6/2017',
'20/6/2017',
'20/6/2017',
'22/6/2017',
'23/6/2017',
'26/6/2017'
];
function sortDates(dates) {
return dates.map(function(date) {
return new Date(date).getTime();
}).sort(function(a, b) {
return a - b;
});
}
var orderedDates = sortDates(dates);
document.getElementById("demoo").innerHTML = orderedDates
var nextDate = orderedDates.filter(function(date) {
return (var now = new Date().getTime(); - date) > 0;
})[0];
document.getElementById("demo").innerHTML = nextDate
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = nextDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
<center><h2>Core Maths 2</h2><center>
This doesn't seem to do anything, so I don't really know what to do. at the moment it just comes up with NAN for the countdown
One problem is, that, for instance, new Date('24/5/2017') yields Invalid Date. I don't think this is a valid Date format recognized by new Date().
If you really need the format like this, you can do something like:
var dates = [
'24/5/2017', // past Date for testing
'12/6/2017',
'14/6/2017',
'16/6/2017',
'20/6/2017',
'20/6/2017',
'22/6/2017',
'23/6/2017',
'26/6/2017'
].map(function (d) {
var parts = d.split('/');
return new Date(parts[2], parts[1] - 1 /* january = 0 */, parts[0]);
});
so you end up having actual Date objects instead of strings by passing the parameters in a order to the Date constructor which it understands.
Another point: Since you can interpret a Date object as a Number (which yields the same as new Date().getTime(), namely the milliseconds since January 1, 1970), you can simply get the minimum using: Math.min.apply(Math, dates). So, your "next Date" (smallest timestamp which is not in the past) can simply been retrieved by var nextDate = new Date(Math.min.apply(Math, dates.filter(x => +x > Date.now())));
Below is a working snipppet which should do what you wanted.
var dates = [
'20/4/2017',
'24/5/2017',
'12/6/2017',
'14/6/2017',
'16/6/2017',
'20/6/2017',
'20/6/2017',
'22/6/2017',
'23/6/2017',
'26/6/2017'
].map(function (d) {
var parts = d.split('/');
return new Date(parts[2], parts[1] - 1 /* january = 0 */, parts[0]);
});
var nextDate = new Date(Math.min.apply(Math, dates.filter(x => +x > Date.now())));
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = nextDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
<center><h2>Core Maths 2</h2><center>
<div id="demo"></div>
So I did your dirty work for you, all you needed to do is some debugging, putting some console logs here and there to find out what was going wrong, which was a couple of things.
1. Your date formats are messed up (at least for me).
Instead of typing '24/5/2017', type '5/24/2017' if you want it to go right when you pass it into a Date() constructor. You can validate this by doing this: console.log(new Date('24/5/2017'));
2. Your filter function was bad
You want the next date, though you check for now - date > 0 which means that only dates that were in past will work. Either use date - now > 0 or now - date < 0.
3. You made a typo
document.getElementById("demoo").innerHTML = orderedDates
Notice the extra 'o' in 'demoo'.
4. You used invalid syntax
var nextDate = orderedDates.filter(function(date) {
return (var now = new Date().getTime(); - date) > 0;
})[0];
This doesn't work because you cannot declare now like this. Extract the declaration of now to a line above the return statement as follows:
var nextDate = orderedDates.filter(function(date) {
var now = new Date().getTime();
return (now - date) < 0;
})[0];
If you apply all these corrections your countdown should work.
Related
I have the following javascript code:
function t5am() {
// Set the date we're counting down to
// Year, Month ( 0 for January ), Day, Hour, Minute, Second, , Milliseconds
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//:::::::::::: ::::::::::::
//:::::::::::: 5:00 AM ::::::::::::
//:::::::::::: ::::::::::::
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
// (AAAA,MM,DD,HH,mm,S));
var countDownDate = new Date(Date.UTC(2020,05,29,12,00,00));
// Update the count down every 1 second
var x = setInterval(function () {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
// GMT/UTC Adjustment at the end of the function. 0 = GMT/UTC+0; 1 = GMT/UTC+1.
var distance = countDownDate - now - (3600000 * 1);
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
for (const ele of document.getElementsByClassName("t5am")){
ele.innerHTML = (days + "<span>d</span> " + hours + "<span>h</span> "
+ minutes + "<span>m</span> " + seconds + "<span>s</span><br />")
}
// If the count down is over, write some text
if (distance < 0) {
for (const ele of document.getElementsByClassName("t5am")) {
ele.innerHTML = "<p class='live-text'>Live</p> ";
}
if (distance + 7200000 < 0){
ele.innerHTML = "Ended";
}
}
}, 1000);
}
t5am()
It is a counter that works fine for me, but now I want to do a double "if" function.
When the counter reaches zero, then it shows "Started".
I need that in addition to that, after 2 hours after "Started", it shows "Ended"
How can I do it?
This is how you can do this:
Just need add two more hours to your current time which i have done below and then check if distance + twoHours < 0 to show 'Ended' Message
Also, you have to clearInterval(x) as well i will leave that for you to clear when you want after the condition have been met and it is ended.
Remember: Its NOT ideal to use setTimeout for this because if the user leave the page and come page the setTimeout funtion will start from 2 hours again which is not ideal in your case you want to stop it exactly after 2 hours to when its was started which will be in real time regardless of user staying on the browser / screen or not.
Just to make some correction on using innerHTML as well. Its is not rec-emended to user innerHTML at all. I have used textContent which is exactly the same.
InnerHTML is not rec-emended officially by javascript MDN . You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML why its not good to use innerHTML to change text in elements.
Recreated Demo: https://jsfiddle.net/bv0odyqr/1/
Try this code and should work just fine.
function t5am() {
// Set the date we're counting down to
// Year, Month ( 0 for January ), Day, Hour, Minute, Second, , Milliseconds
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//:::::::::::: ::::::::::::
//:::::::::::: #1 ::::::::::::
//:::::::::::: ::::::::::::
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
// (AAAA,MM,DD,HH,mm,S));
var countDownDate = new Date(Date.UTC(2020, 05, 27, 20, 20, 0));
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
const twoHours = new Date();
twoHours.setHours(twoHours.getHours() + 2);
var two = twoHours.getTime()
// Find the distance between now an the count down date
// GMT/UTC Adjustment at the end of the function. 0 = GMT/UTC+0; 1 = GMT/UTC+1.
var distance = countDownDate - now - (3600000 * 1);
//Results div
var result = document.getElementsByClassName("t5am")[0];
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementsByClassName("t5am")[0].textContent = days + "<span>d</span> " + hours + "<span>h</span> " +
minutes + "<span>m</span> " + seconds + "<span>s</span><br />";
// If the count down is over, write some text
if (distance < 0) {
result.textContent = "Started";
} else if (distance + twoHours < 0) {
result.textContent = "Ended";
}
}, 1000);
}
t5am()
<div class="t5am"></div>
We had this countdown for Christmas, but now it shows expired instead of resetting to next year
// Set the date we're counting down to
var year = new Date().getFullYear();
var countDownDate = new Date("Dec 24, " + year + " 23:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="clock"
document.getElementById("clock").innerHTML = days + " days " + hours + "hrs. " + minutes + "mins. " + seconds + "secs. ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("clock").innerHTML = "EXPIRED";
}
}, 1000);
The 'expired' message should maybe show during the 25-26th of December and then reset back to counting on 27th till next year?
I cant see where you check if your date is later than december, 26th, here should be code like this
if (days < -2) {
countDownDate = new Date("Dec 24, " + (year + 1) + " 23:00:00").getTime();
} else if (distance < 0) {
clearInterval(x);
document.getElementById("clock").innerHTML = "EXPIRED";
}
or better just in the very beginning write
var now = new Date()
var year = now.getFullYear() + (now.getMonth() == 11 && now.getDate() > 26)
Below are suggested edits to your code. Near the top, we decide which year's Christmas to count down to.
If you look over the code and commments, you can see more about how date information can be used in JavaScript.
If you want to know more, there's great information at MDN's Date Object page.
// Get a Date object for the current time before starting the countdown
let startTime = new Date()
// Get the year, month and day from the date object
let year = startTime.getFullYear();
let monthIndex = startTime.getMonth();
let dayOfMonth = startTime.getDate();
//console.log (`${year} ${monthIndex} ${dayOfMonth}`);
if (monthIndex === 11 && dayOfMonth > 27){ // Jan has monthIndex == 0
year = year + 1; // Use next year
}
// Set the date we're counting down to
let countDownDate = new Date("Dec 24, " + year + " 23:00:00").getTime();
// Start the countdown, updating the display every 1 second
var x = setInterval(function() {
// Get a Date object for the current second of the countdown
var date = new Date()
// Get the timestamp from the Date object
var now = date.getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Function to show "day" if 1 day, "days" if 2 or more days, etc.
function pluralIfAppropriate(value, singularLabel, pluralLabel){
if(value == 1){
return singularLabel;
}
else{
if(pluralLabel == undefined){
pluralLabel = singularLabel + "s";
}
return pluralLabel;
}
}
// Builds the display text
let displayText = `${days} ${pluralIfAppropriate(days, "day")} ${hours}${pluralIfAppropriate(hours, "hr")} ${minutes}${pluralIfAppropriate(minutes, "min")} ${seconds}${pluralIfAppropriate(seconds, "sec")}`;
// Displays the displayText in the element with id="clock"
document.getElementById("clock").innerHTML = displayText;
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("clock").innerHTML = "EXPIRED";
}
}, 1000);
<p id="clock"></p>
I was following this tutorial: https://www.w3schools.com/howto/howto_js_countdown.asp
And everything works except for timezones, I want it to show the same time on every device, no matter the timezone, in UTC. How would I go about this?
If someone in a timezone was ahead of me, they would see a different time (because they are an hour ahead, so the countdown would end at a different time. It would end for them an hour ahead of when it ends for me, I want the same time on the timer to be shown everywhere
Code (Edited):
function convertDateToUTC(date) {
return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
}
function getUTCNow() {
var now = new Date();
var time = now.getTime();
var offset = now.getTimezoneOffset();
offset = offset * 60000;
return time - offset;
}
// Set the date we're counting down to
//var countDownDate = new Date("Sep 15, 2018 15:00:00").getTime();
var countDownDate = new Date("Sep 7, 2018 20:00:00");
var countDD = convertDateToUTC(countDownDate);
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date();
var nowUTC = now.getUTCTime();
// Find the distance between now and the count down date
var distance = countDD.getTime() - nowUTC.getTime();
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="timer"
document.getElementById("timer").innerHTML = days + "d " + hours + "h " +
minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "RELEASED!";
}
}, 1000);
<div id="timer"></div>
Here are my code on my current program. I have a running code for countdown timer my problem now is when the VOTING PERIOD ENDS I want to display Voting Ends instead of it always displaying voting open.
<script>
// Set the date we're counting down to
var countDownDate = new Date("<?php echo $countdown['datestart']; ?>").getTime();
var endDate = new date("<?php echo $countdown['dateend']; ?>").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "Voting now Opens";
}
// If date end is over display some text
//display voting period ends
}, 1000);
</script>
At a glance, i can see that your "endDate" line has an error:
var endDate = new date(.....
it should be Date with a capital 'D' as is for the var countDownDate i.e.
var endDate = new Date(.....
Assuming the rest of the code is correct (and it seems ok) - should be fine.
If that doesn't solve it - from your question it is easy to decipher that the if the following function always resolves to false and hence will never fire enclosed code which clears the 'x' interval and shows that voting is open.
if (distance < 0) {...}
If what I would do is console.log(countDownDate);, console.log(now); and why not also console.log(distance); ideally immidiately after the declaration:
// Find the distance between now an the count down date
var distance = countDownDate - now;
if you are unsure how to use the console.log() function please refer to the following link: https://developers.google.com/web/tools/chrome-devtools/console/
To add the end voting message, you will need to continue the interval until the voting has ended. To make things a little simpler, we have split the code into 3 sections using if...else if...else. In each of these, we handle the respective display for that scenario. It has the added benefit of not doing calculations when it is not needed.
If distance > 0, the voting has not started.
If endDate > now, the voting hasn't ended. I am assuming that the PHP output will result in an accurate date for this scenario. Read more.
Any other scenario means voting has ended.
<script>
// Set the date we're counting down to
var countDownDate = new Date("<?php echo $countdown['datestart']; ?>").getTime();
var endDate = new Date("<?php echo $countdown['dateend']; ?>").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
if (distance > 0) {
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
}
else if (endDate > now) {
// If the count down is over, write some text
document.getElementById("demo").innerHTML = "Voting now Opens";
}
else {
// If date end is over display some text
//display voting period ends
document.getElementById("demo").innerHTML = "Voting Ended";
clearInterval(x);
}
}, 1000);
</script>
function countDown(){
// Set the date we're counting down to
var countDownDate = new Date("july 11, 2017 10:19:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
countDownDate = new Date("july 18, 2017 10:19:00").getTime();
}
}, 1000);
}
countDown();
what I want to reach is the every week the timer will start count to the next week.
I have something that start every week in the same day and in the same hour.
I don't want to rewrite the code every week :/
Thank you.
so why so much calculation is needed just to calculate how many seconds are remaining to start of next week? for example I am writing a sample code to calculate it.
function distranceToNextWeekStartInSeconds() {
var now = new Date()
var dayDiff = 7 - now.getDay();
var startOfNextWeek = new Date(now.valueOf());
startOfNextWeek.setDate(now.getDate() + dayDiff);
startOfNextWeek.setHours(0);
startOfNextWeek.setMinutes(0);
startOfNextWeek.setSeconds(0);
return Math.floor((startOfNextWeek - now) / 1000);
}
console.log('Seconds remaining to next week start: ' + distranceToNextWeekStartInSeconds())
and you can simply call this function inside your timer for a live calculation and display purpose, That's It.
I assumed you wanted to count down to every next tuesday at 10:19:00.
I'm too lazy right now to test every cases, ut I think it should work.
function getNextTuesday() {
// Get the date from now
var date = new Date();
// Set target hour/minute/seconds
date.setHours(10);
date.setMinutes(19);
date.setSeconds(0);
// Seek for the next tuesday
var actualDay = date.getDay();
var targetDay = 2; //Tuesday
// diff will give us the day span between today and the next tuesday
var diff = targetDay - actualDay;
// If the diff is less than 0 (we're sunday or monday, or we fall on the exact day, minutes after the target hour) then add a week
if (diff < 0 || (date.getTime() - new Date().getTime()) <= 0) {
diff += 7;
}
// Finally add the day span to the current date
date.setDate(date.getDate() + diff);
return date;
}
function countDown() {
// Set the date we're counting down to
var countDownDate = getNextTuesday();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
if (distance < 0) {
// If the count down is over, write some text
document.getElementById("demo").innerHTML = 'IT\'S HAPPENING !';
countDownDate = getNextTuesday();
} else {
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}
}, 1000);
}
countDown();
<div id="demo"></div>