Mettre un code en array pour utilisation multiple

Résolu

SkyCrasher Messages postés 45 Date d'inscription samedi 4 janvier 2003 Statut Membre Dernière intervention 6 janvier 2022 - 4 avril 2019 à 21:16
SkyCrasher Messages postés 45 Date d'inscription samedi 4 janvier 2003 Statut Membre Dernière intervention 6 janvier 2022 - 6 avril 2019 à 16:52

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>

A voir également:

Mettre un code en array pour utilisation multiple
ASP / ASP.NET : Code behind et controle utilisateur - CodeS SourceS - Guide
Création controle utilisateur et utilisation multiple - Codes sources - Visual Basic / VB.NET (Control)
Delphi / Pascal : Editeur de code multi-langage - multicodeeditor (utilisation des colorations synta - Guide
Code non interprété apres utilisation de fread() ✓ - Forum - PHP
Exemple de code d'utilisateur - Guide

6 réponses

Réponse 1 / 6

@karamel Messages postés 1812 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 4 octobre 2022 145
5 avril 2019 à 10:20

bonjour

tu cherche a afficher plusieurs compteurs ?

Réponse 2 / 6

SkyCrasher Messages postés 45 Date d'inscription samedi 4 janvier 2003 Statut Membre Dernière intervention 6 janvier 2022
5 avril 2019 à 10:48

Bonjour,
Exactement un seul script plusieurs compteurs.

Réponse 3 / 6

@karamel Messages postés 1812 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 4 octobre 2022 145
Modifié le 5 avril 2019 à 12:00

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 !

Réponse 4 / 6

SkyCrasher Messages postés 45 Date d'inscription samedi 4 janvier 2003 Statut Membre Dernière intervention 6 janvier 2022
6 avril 2019 à 12:15

Je n'arrive pas à faire fonctionner ton script, il ne manque rien ?

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

@karamel Messages postés 1812 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 4 octobre 2022 145
Modifié le 6 avril 2019 à 12:25

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 !

Réponse 6 / 6

SkyCrasher Messages postés 45 Date d'inscription samedi 4 janvier 2003 Statut Membre Dernière intervention 6 janvier 2022
6 avril 2019 à 16:52

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

Votre réponse