I want to display 14 countdowns (preferably as plain p elements in my HTML document) on a single HTML page. I don't know anything about JavaScript so I took a countdown script from w3schools. Works fine, somehow I even manages to display the timer double digit by searching the web how to.
Here's the code (UPDATE!):
// defining countDownDates as an empty array :
var countDownDates = [];
// adding any count down date to your array :
countDownDates.push(new Date("Oct 22, 2017 14:00:00").getTime());
countDownDates.push(new Date("Oct 23, 2017 14:00:00").getTime());
countDownDates.push(new Date("Oct 24, 2017 08:00:00").getTime());
countDownDates.push(new Date("Oct 25, 2017 08:00:00").getTime());
countDownDates.push(new Date("Oct 24, 2017 08:00:00").getTime());
countDownDates.push(new Date("Oct 25, 2017 08:00:00").getTime());
countDownDates.push(new Date("Oct 26, 2017 02:00:00").getTime());
countDownDates.push(new Date("Oct 27, 2017 02:00:00").getTime());
countDownDates.push(new Date("Oct 27, 2017 20:00:00").getTime());
countDownDates.push(new Date("Oct 29, 2017 02:00:00").getTime());
countDownDates.push(new Date("Oct 27, 2017 20:00:00").getTime());
countDownDates.push(new Date("Oct 29, 2017 02:00:00").getTime());
countDownDates.push(new Date("Oct 29, 2017 19:00:00").getTime());
countDownDates.push(new Date("Oct 30, 2017 19:00:00").getTime());
// calling an init function that will build the HTML needed for every count down
init(countDownDates);
// looping through your array of countDownDates
for (var i=0;i<countDownDates.length;i++) {
// calling the countdown function, pass it the array and the current version of i as parameters
countDown(countDownDates, i);
}
/* adds, to the document, a p element for each entry in the countDownDates array */
function init(countDownDates) {
var timersDiv = document.getElementById("timers");
var dateElement;
for (var i=0;i<countDownDates.length;i++) {
dateElement = document.createElement("p");
dateElement.id = "date" + i;
timersDiv.appendChild(dateElement);
}
}
/* countDown function, your countDown handling code within a reusable function */
function countDown(countDownDates, index) {
var x = setInterval(function() {
var now, distance, days, hours, minutes, seconds, x;
now = new Date().getTime();
distance = countDownDates[index] - now;
// Time calculations for days, hours, minutes and seconds
days = Math.floor(distance / (1000 * 60 * 60 * 24));
hours = Math.floor((distance % (1000 * 60 * 60 * 24)) /
(1000 * 60 * 60));
minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display days, hours, minutes and seconds in 2 digits if < 10
if((days+"").length === 1){
days = "0"+days;
}
if((hours+"").length === 1){
hours = "0"+hours;
}
if((minutes+"").length === 1){
minutes = "0"+minutes;
}
if((seconds+"").length === 1){
seconds = "0"+seconds;
}
// Display the result in the element with id date0, date1, etc.
document.getElementById("date" + index).innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds + "";
// If the count down is finished, write some text and add css class to change ended timers color
if (distance < 0) {
clearInterval(x);
document.getElementById("date" + index).className = "timerend";
document.getElementById("date" + index).innerHTML = "00:00:00:00";
}
}, 1000);
}
I tried to multiply the script completely 14 times with altered first line of code to a specific future date - so the same countdown shows up 14 times.
Is there a way to multiply the first line somehow 14 times to have 14 different specific dates to count from in 14 different p elements by 14 IDs?
e.g.
<p class="date1" >show timer1</p>
<p class="date2" >show timer2</p>
<p class="..." >...</p>
<p class="date14" >show timer14</p>
Edit:
In addition I would like to know how I can have two additional pelement outputs like
<p class="online_date0" >show text "This countdown is running right now"</p>
<p class="offline_date0 >show text "This countdown is not running at the moment</p>
... to have something like an indicator like "on air". Thanks!
Edit Nov 1, 2017
I don't get why this don't work in the specific if funktion:
if (distance < 0) {
clearInterval(x);
document.getElementById("date" + index).className = "timerend";
document.getElementById("outofdate" + index).className = "timerend";
document.getElementById("date" + index).innerHTML = "00:00:00:00";
In the HTML document the date + index ps have a class which is removed when timerend is added. If I add a +before =in the first line after clearInterval(x) the old class stays, but the new class is added every second. I just want to add it one time of course. And if I don't put +before =in that line, the old class is removed of course.
Since I'm beginning to learn Js I want to understand what is happening here. What did I miss?
I just want to add a class to every p with indexed ids so it changes color when timer ends. It works, but it removes all other formats I put by the class those indexed ps have.
HTML
<p id="date0" class="dates"></p>
In CSS I put padding and so on in .dates. I've read about adding classes and keep originals, but can't understand a solution obviously.
To "multiply" your code, you could combine the use of an array and a function.
Here's an example :
// defining countDownDates as an empty array :
var countDownDates = [];
// adding any count down date to your array :
countDownDates.push(new Date("Oct 24, 2017 10:49:50").getTime());
countDownDates.push(new Date("Oct 24, 2017 10:49:45").getTime());
countDownDates.push(new Date("Oct 28, 2017 10:49:45").getTime());
countDownDates.push(new Date("Oct 29, 2017 10:49:45").getTime());
countDownDates.push(new Date("Oct 30, 2017 10:49:45").getTime());
countDownDates.push(new Date("Nov 1, 2017 10:49:45").getTime());
countDownDates.push(new Date("Nov 12, 2017 10:49:45").getTime());
countDownDates.push(new Date("Nov 24, 2017 10:49:45").getTime());
// calling an init function that will build the HTML needed for every count down
init(countDownDates);
// looping through your array of countDownDates
for (var i=0;i<countDownDates.length;i++) {
// calling the countdown function, pass it the array and the current version of i as parameters
countDown(countDownDates, i);
}
/* adds, to the document, a p element for each entry in the countDownDates array */
function init(countDownDates) {
var timersDiv = document.getElementById("timers");
var dateElement;
for (var i=0;i<countDownDates.length;i++) {
dateElement = document.createElement("p");
dateElement.id = "date" + i;
timersDiv.appendChild(dateElement);
}
}
/* countDown function, your countDown handling code within a reusable function */
function countDown(countDownDates, index) {
var x = setInterval(function() {
var now, distance, days, hours, minutes, seconds, x;
now = new Date().getTime();
distance = countDownDates[index] - now;
// Time calculations for days, hours, minutes and seconds
days = Math.floor(distance / (1000 * 60 * 60 * 24));
hours = Math.floor((distance % (1000 * 60 * 60 * 24)) /
(1000 * 60 * 60));
minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display days, hours, minutes and seconds in 2 digits if < 10
if((days+"").length === 1){
days = "0"+days;
}
if((hours+"").length === 1){
hours = "0"+hours;
}
if((minutes+"").length === 1){
minutes = "0"+minutes;
}
if((seconds+"").length === 1){
seconds = "0"+seconds;
}
// Display the result in the element with id date0, date1, etc.
document.getElementById("date" + index).innerHTML = days + ":" +
hours + ":"
+ minutes + ":" + seconds + "";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("date" + index).innerHTML = "Ende!";
}
}, 1000);
}<!-- just an empty div we will add countDown elements into -->
<div id="timers">
</div>