Comment afficher plusieurs compteurs de compte à rebours javascript

Question

Je souhaite afficher plusieurs compteurs 3 ou 4 dans une seule fonction et les afficher tous dans des divs différents. Cela fonctionne mais affiche le même compte à rebours dans les deux divs.

var countDownDate = new Date("Sep 15, 2017 12:25:25").getTime(); 
var countDownDate = new Date("Sep 19, 2017 12:25:25").getTime(); 



var x = setInterval(function() { 


var now = new Date().getTime(); 


var distance = countDownDate - now; 


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


document.getElementById("timer").innerHTML = days + "<span style='font-weight:normal'>d</span> " + hours + "h " + minutes + "m " + seconds + "s "; 
document.getElementById("timer2").innerHTML = days + "<span style='font-weight:normal'>d</span> " + hours + "h " + minutes + "m " + seconds + "s "; 



if (distance < 0) { 
clearInterval(x); 
document.getElementById("timer").innerHTML = "ICO Has Ended"; 
} 
}, 1000); 

Answer 1

Vous avez seulement une variable pour countDownDate et vous écrasez l'original.

var countDownDate = new Date("Sep 15, 2017 12:25:25").getTime(); 
var countDownDate = new Date("Sep 19, 2017 12:25:25").getTime(); 

Ici vous avez un countDownDate qui est une date de "19 septembre 2017 12:25:25". Vous allez créer 2 variables différentes. Essayez de changer la seconde countDownDate en countDownDate2 et faites de même dans le reste de votre code.

var countDownDate1 = new Date("Sep 15, 2017 12:25:25").getTime(); 
var countDownDate2 = new Date("Sep 19, 2017 12:25:25").getTime(); 

var x = setInterval(function() { 
    var now = new Date().getTime(); 
    var distance1 = countDownDate1 - now; 
    var distance2 = countDownDate2 - now; 


    var days1 = Math.floor(distance1/(1000 * 60 * 60 * 24)); 
    var hours1 = Math.floor((distance1 % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
    var minutes1 = Math.floor((distance1 % (1000 * 60 * 60))/(1000 * 60)); 
    var seconds1 = Math.floor((distance1 % (1000 * 60))/1000); 

    var days2 = Math.floor(distance2/(1000 * 60 * 60 * 24)); 
    var hours2 = Math.floor((distance2 % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
    var minutes2 = Math.floor((distance2 % (1000 * 60 * 60))/(1000 * 60)); 
    var seconds2 = Math.floor((distance2 % (1000 * 60))/1000); 

    document.getElementById("timer").innerHTML = days + "<span style='font-weight:normal'>d</span> " + hours1 + "h " + minutes1 + "m " + seconds1 + "s "; 
    document.getElementById("timer2").innerHTML = days + "<span style='font-weight:normal'>d</span> " + hours2 + "h " + minutes2 + "m " + seconds2 + "s "; 

if (distance < 0) { 
    clearInterval(x); 
    document.getElementById("timer").innerHTML = "ICO Has Ended"; 
} 
}, 1000); 

Avec ce code ci-dessus, je chercherais à refactoriser cela en plusieurs fonctions. Currenlty cette fonction est considérée comme surchargée et devrait être brisée en plus petit. Peut-être sortir les intervalles get dans une fonction différente où vous lui envoyez les 2 dates, et il renvoie le H, M, S.

Answer 2

Extrait tout cela en fonction:

function setTimer(enddate, elem){ 
    (function tick() { 
     var now = new Date().getTime(); 
     var distance = enddate - now; 
     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); 


    elem.innerHTML = days + "<span style='font-weight:normal'>d</span> " + hours + "h " + minutes + "m " + seconds + "s "; 

    if(distance < 0){ 
    elem.innerHTML = "ICO Has Ended"; 
    }else{ 
    setTimeout(tick,1000); 
    } 
    })() 
} 

Alors on peut faire:

setTimer(
    new Date("Sep 19, 2017 12:25:25"), 
    document.getElementById(" timer1") 
); 
setTimer(
    new Date("Sep 21, 2017 12:25:25"), 
    document.getElementById(" timer2") 
); 

Answer 3

vous devez déclarer 2 variables distinctes pour les dates, celles-ci sont actuellement l'autre permettent de remplacer.

alors vous devez appeler la minuterie d'intervalle pour chaque date, donc serait le plus efficace pour envelopper dans une fonction - voir ci-dessous, cela devrait fonctionner

var countDownDate1 = new Date("Sep 15, 2017 12:25:25").getTime(); 
var countDownDate2 = new Date("Sep 19, 2017 12:25:25").getTime(); 

var timer1= document.getElementById("timer") 
var timer2= document.getElementById("timer2") 

function countdown(finish_date, timer){ 

    var x = setInterval(function() { 

        var now = new Date().getTime(); 

        var distance = finish_date - now; 

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

        timer.innerHTML = days + "<span style='font-weight:normal'>d</span> " + hours + "h " + minutes + "m " + seconds + "s "; 


        if (distance < 0) { 
        clearInterval(x); 
        timer.innerHTML = "ICO Has Ended"; 
        } 
        }, 1000); 
} 

countdown(countDownDate1, timer1) 
countdown(countDownDate2, timer2) 

lien jsFiddle: https://jsfiddle.net/mpwaw/j95x8y86/

Answer 4

var count1Div = document.getElementById('count1'); 
 
var count2Div = document.getElementById('count2'); 
 
var count3Div = document.getElementById('count3'); 
 

 
function appendZero(num) { 
 
return num < 10 ? "0"+num : num; 
 
} 
 

 
function setCountContent(element, count) { 
 
var min = count.getMinutes(); 
 
var sec = count.getSeconds(); 
 
var hour = count.getHours(); 
 

 
element.innerText = appendZero(hour) + " : " + appendZero(min) + " : " + appendZero(sec); 
 
} 
 

 
var interval = setInterval(function(e){ 
 
var count = new Date(); 
 
var count2 = new Date(); 
 
var count3 = new Date(); 
 

 
count2.setMinutes(count.getMinutes() + 1); 
 
count3.setMinutes(count2.getMinutes() + 1); 
 

 
setCountContent(count1Div, count); 
 
setCountContent(count2Div, count2); 
 
setCountContent(count3Div, count3); 
 

 
// it will stop when minutes are equal to 13 
 
if (count.getMinutes() == 13) { 
 
    clearInterval(interval); 
 
} 
 

 
}, 1000);

div{ 
 
    width: 100%; 
 
    height: 5em; 
 
}

<div id="count1" style="background-color: darkmagenta; color: white;"></div> 
 
<div id="count2" style="background-color: orange; color: white;"></div> 
 
<div id="count3" style="background-color: whitesmoke; color: black;"></div>

Voici un exemple