Compte à rebours Multiple

Version imprimable

Bonjour,

Mon problème est le suivant: Je dispose d'une page avec plusieurs produits. Pour chaque produit, j'aimerais pouvoir avoir un compte à rebours.

En fait, j'ai bien une idée: créer la même fonction pour chaque produit (dynamiquement) mais j'aimerais que ça soit "propre" et avoir une fonction qui les gère tous...

J'ai déjà testé moult manières. J'y arrive pas... :/

Quelqu'un pourrait-il éclairé mes lumières? Une piste du moins... ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
 
  PRODUIT TEST 1 <br />
  <input type="text" id="date_end1" value="2011 02 28 00 00 00" />
  <div id="countdown1" style="display:block;"></div><hr />
 PRODUIT TEST 2 <br />
  <input type="text" id="date_end2" value="2011 03 15 23 59 00" />
  <div id="countdown2" style="display:block;"></div><hr />
<br />
 
<script type="text/JavaScript">
    function Rebour(div, date_end) {
      var date1 = new Date();
      var date2 = new Date (date_end); // Date et heure de l'événement
      var sec = (date2 - date1) / 1000; // Temps donné en millièmes de seconde
      var n = 24 * 3600; //nombre de secondes dans un jour
      if (sec > 0) {
          j = Math.floor (sec / n);
          h = Math.floor ((sec - (j * n)) / 3600);
          mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
          sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
          div.innerHTML = + h +"h "+ mn +"min "+ sec + "s";
      }
      tRebour=setTimeout("Rebour();", 0);
    }
    var k = 1;
    for(var i=0; i < document.getElementById("productNumber").value; i++){
      k = k + i;
      ladiv = document.getElementById("countdown" + k);
      ladate = document.getElementById("date_end" + k).value;
      new Rebour(ladiv, ladate);
    }
 
</script>

Cordialement, Guillaume.

Pour moi le plus simple serait d'avoir une seule fonction sans paramètre et un tableau associatif contenant chaque div et la date associée :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var divDate = new Array();
for(var i=0; i < document.getElementById("productNumber").value; i++){
  k = k + i;
  ladiv = document.getElementById("countdown" + k);
  ladate = document.getElementById("date_end" + k).value;
  divDate[ladiv] = ladate;
}
 
function rebours() {
  var date1 = new Date();
  for (var div in divDate) {
    // là tu recalcule le temps pour chaque div :
  }
}
 
var timer=setInterval("rebours()", 10);

Je n'y arrive pas...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
  <input type="hidden" id="productNumber" value="2" />
  MON PRODUIT 1 <br />
  <input type="text" id="date_end1" value="03-20-2011" />
  <div id="countdown1" style="display:block;"></div><hr />
 MON PRODUIT 2 <br />
  <input type="text" id="date_end2" value="03-20-2011" />
  <div id="countdown2" style="display:block;"></div><hr />
<br />
 
<script type="text/JavaScript">
var divDate = new Array();
var k = 1;
for(var i=0; i < document.getElementById("productNumber").value; i++){
  k = k + i;
  ladiv = document.getElementById("countdown" + k);
  ladate = document.getElementById("date_end" + k).value;
  divDate[ladiv] = ladate;
}
function rebours() {
  var date1 = new Date();
  foreach (var dive in divDate) {
          var date2 = new Date(dive.value); // Date et heure de l'événement
          var sec = (date2 - date1) / 1000; // Temps donné en millièmes de seconde
          var n = 24 * 3600; //nombre de secondes dans un jour
          j = Math.floor (sec / n);
          h = Math.floor ((sec - (j * n)) / 3600);
          mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
          sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
          dive.innerHTML = + h +"h "+ mn +"min "+ sec + "s";
  }
}
 
var timer=setInterval("rebours()", 10);
</script>

Je tiens à préciser que j'ai essayer plusieurs combinaisons. Celle ci la dernière en date. Mais ça ne fonctionne pas. Je n'arrive pas à comprendre pourquoi.

Dans le for, je prends mon objet div, je prends sa value. (qui devrait donc etre "ladate"). ensuite, je fais le .innerhtml de dive (qui est "ladiv").

Mais ça môrche pô. : /

(en tout cas, merci de te pencher sur mon cas)

un exemple de ce qui fonctionne en instanciant des nouvelles fonctions

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script type="text/javascript">
arrfunc=new Array()
 function Rebour(div,start) {
 
      }
 
function relay(div, start){ 
			this.chrono=(this.chrono==undefined)?start:this.chrono//:start
          document.getElementById(div).innerHTML = ++this.chrono
senddiv=div 
sendstart=this.chrono
setTimeout( function(){relay(div,sendstart)},1000) 
}
 
 
 
function init(){
for(i=1;i<7;i++){
 new relay('_'+i,i*3) 
}
}
 
</script>
</head>
 
<body onload="init()">
 
<div id="_1"></div>
<div id="_2"></div>
<div id="_3"></div>
<div id="_4"></div>
<div id="_5"></div>
<div id="_6"></div>
<div id="_7"></div>
</body>
 
</html>