Mettre un code en array pour utilisation multiple [Résolu]

Signaler
Messages postés
43
Date d'inscription
samedi 4 janvier 2003
Statut
Membre
Dernière intervention
28 avril 2019
-
SkyCrasher
Messages postés
43
Date d'inscription
samedi 4 janvier 2003
Statut
Membre
Dernière intervention
28 avril 2019
-
Bonjour,
Voici le code auquel je souhaite rajouter une Array pour toujours faire plusieurs occurences sur la même page web:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
countdownManager = {
    // Configuration
    targetTime: new Date('<?PHP echo $dateattaque;?>'), // Date cible du compte à rebours (00:00:00)
    displayElement: { // Elements HTML où sont affichés les informations
        day:  null,
        hour: null,
        min:  null,
        sec:  null
    },
    // Initialisation du compte à rebours (à appeler 1 fois au chargement de la page)
    init: function(){
        // Récupération des références vers les éléments pour l'affichage
        // La référence n'est récupérée qu'une seule fois à l'initialisation pour optimiser les performances
        this.displayElement.day  = jQuery('#countdown_day');
        this.displayElement.hour = jQuery('#countdown_hour');
        this.displayElement.min  = jQuery('#countdown_min');
        this.displayElement.sec  = jQuery('#countdown_sec');
        // Lancement du compte à rebours
        this.tick(); // Premier tick tout de suite
        window.setInterval("countdownManager.tick();", 1000); // Ticks suivant, répété toutes les secondes (1000 ms)
    },
    // Met à jour le compte à rebours (tic d'horloge)
    tick: function(){
        // Instant présent
        var timeNow  = new Date();
        // On s'assure que le temps restant ne soit jamais négatif (ce qui est le cas dans le futur de targetTime)
        if( timeNow > this.targetTime ){
            timeNow = this.targetTime;
        }
        // Calcul du temps restant
        var diff = this.dateDiff(timeNow, this.targetTime);
        this.displayElement.day.text(  diff.day  );
        this.displayElement.hour.text( diff.hour );
        this.displayElement.min.text(  diff.min  );
        this.displayElement.sec.text(  diff.sec  );
    },
    // Calcul la différence entre 2 dates, en jour/heure/minute/seconde
    dateDiff: function(date1, date2){
        var diff = {}                           // Initialisation du retour
        var tmp = date2 - date1;
        tmp = Math.floor(tmp/1000);             // Nombre de secondes entre les 2 dates
        diff.sec = tmp % 60;                    // Extraction du nombre de secondes
        tmp = Math.floor((tmp-diff.sec)/60);    // Nombre de minutes (partie entière)
        diff.min = tmp % 60;                    // Extraction du nombre de minutes
        tmp = Math.floor((tmp-diff.min)/60);    // Nombre d'heures (entières)
        diff.hour = tmp % 24;                   // Extraction du nombre d'heures
        tmp = Math.floor((tmp-diff.hour)/24);   // Nombre de jours restants
        diff.day = tmp;
        return diff;
    }
};
jQuery(function($){
    // Lancement du compte à rebours au chargement de la page
    countdownManager.init();
});
</script>

		<font class="Blanc">
		<span id="countdown_day" ></span> jours
	    <span id="countdown_hour"></span> heures
	    <span id="countdown_min" ></span> minutes
	    <span id="countdown_sec" ></span> secondes
	<?PHP echo "<font id=\"countdown_hour\"></font>";?>
	</font>
		</td></tr>

6 réponses

Messages postés
1749
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
18 février 2020
53
bonjour

tu cherche a afficher plusieurs compteurs ?
Messages postés
43
Date d'inscription
samedi 4 janvier 2003
Statut
Membre
Dernière intervention
28 avril 2019

Bonjour,
Exactement un seul script plusieurs compteurs.
Messages postés
1749
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
18 février 2020
53
malheureusement le script que tu utilise ne peut fonctionné qu'avec un seul compteur je te propose plutot ce script qui permet plusieurs compteurs

<!DOCTYPE html>
<html>
<head>

<style type="text/css">

body{
 background: #333333; 
}

div{
color:white;
margin:auto;
text-align:center;
}

</style>
<script>

function rebour_multiple(tempsFin, idRebour){

 this.tempsFin=tempsFin;
 this.idRebour=document.getElementById(idRebour);
 this.inter=false;
 var that=this;
 this.inter=setInterval(function(){that.rebour()}, 1000);
 this.rebour()
 }

rebour_multiple.prototype.rebour=function(){

 var date1 = new Date().getTime();
 var date2 = new Date(this.tempsFin).getTime();

 if(date1>date2){
  this.idRebour.firstChild.nodeValue ='fini'
  clearInterval(this.inter)
 }

 else{
  var sec = (date2 - date1) / 1000;
  var n = 24 * 3600;

  var j = Math.floor (sec / n);
  var h = Math.floor ((sec - (j * n)) / 3600);
  var mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
  var sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));

  j= j < 10 ? '0' + j : j;
  h= h < 10 ? '0' + h : h;
  mn= mn < 10 ? '0' + mn : mn;
  sec= sec < 10 ? '0' + sec : sec;

  if(j=="00" && h=="00" && mn=="00"){
   this.idRebour.firstChild.nodeValue =sec+"s";
  }
    
  else if(j=="00" && h=="00"){
   this.idRebour.firstChild.nodeValue =mn +"m  "+ sec+"s";
  }

  else if(j=="00"){
   this.idRebour.firstChild.nodeValue =h +"h  "+ mn +"m  "+ sec+"s";
  }
  else{
   this.idRebour.firstChild.nodeValue =j +"J  "+ h +"h  "+ mn +"m  "+ sec+"s";
  }
 }
}

function initcompteur(){

 new rebour_multiple('09/10/2019 22:47:00',"compteur1");

 new rebour_multiple('05/26/2019 12:55:20', "compteur2");

 new rebour_multiple('08/02/2019 18:00:00', "compteur3");
 
 new rebour_multiple('09/10/2019 22:47:00',"compteur4");

 new rebour_multiple('012/18/2019 12:55:20', "compteur5");

 new rebour_multiple('08/02/2019 18:00:00', "compteur6");
 
 new rebour_multiple('09/10/2020 22:47:00',"compteur7");

 new rebour_multiple('02/18/2019 12:55:20', "compteur8");

 new rebour_multiple('04/05/2019 18:00:00', "compteur9");

}

typeof window.addEventListener == 'undefined' ? window.attachEvent('onload', initcompteur) : window.addEventListener('load', initcompteur, false);

</script>

 </head><body>
 
  <div id="compteur1">00:00:00</div>
  <br>
  <div id="compteur2">00:00:00</div>
  <br>
  <div id="compteur3">00:00:00</div>
  <br>
  <div id="compteur4">00:00:00</div>
  <br>
  <div id="compteur5">00:00:00</div>
  <br>
  <div id="compteur6">00:00:00</div>
  <br>
  <div id="compteur7">00:00:00</div>
  <br>
  <div id="compteur8">00:00:00</div>
  <br>
  <div id="compteur9">00:00:00</div>
      
 </body></html>


rien ne sert de courir il faut partir a point.
cours Forest cours !
Messages postés
43
Date d'inscription
samedi 4 janvier 2003
Statut
Membre
Dernière intervention
28 avril 2019

Je n'arrive pas à faire fonctionner ton script, il ne manque rien ?
Messages postés
1749
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
18 février 2020
53
je vient de faire un copier collé au cas ou j'ai fait une erreur et je vient de le testé sur plusieurs navigateur et il marche je ne saurait dire, comment a t'il eté implémenté.

rien ne sert de courir il faut partir a point.
cours Forest cours !
Messages postés
43
Date d'inscription
samedi 4 janvier 2003
Statut
Membre
Dernière intervention
28 avril 2019

Il fonctionne mais j'avais un message Access Denied hier.
Merci