Affichage des résultats avec intervalle de temps

Version imprimable

Bonjour, je veux faire un calcul successif représenter par le code suivant :

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
38
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      #container{ background-color: lightgreen; text-align: center ;width: 350px; border:solid 1px black; min-height: 15px}
      #resultat{ background-color: #80BFFF; width: 350px; border:solid 1px black; min-height: 150px}
    </style>
    <script>
      p = new Array();
      function calculer() {
        var affiche=document.getElementById("resultat");
        x=1*document.getElementById("nb_a").value;
        y=1*document.getElementById("nb_b").value;
        p[0]=x;
        p[1]=p[0]*y;
        affiche.innerHTML +="<br/>p["+ 1 +"]=a*b = "+ p[1] +"<br/>";
        
        for (var i = 2; i < 10; i++) {
        k=i-1;
        p[i]=p[k]*y;
        affiche.innerHTML +="p["+ i +"]=p["+ k +"]*b = "+ p[i] +"<br/>";
        }
        
      }
    </script>
  </head>
  <body>
    <p>a = <input id="nb_a"></p>
    <p>b = <input id="nb_b"></p>
 
    <input type="button" value="CALCULER" onclick="calculer();"><br/>
 
    <div id="container" >Voici quelques resultats des calculs :</div>
    <div id="resultat" ></div>
 
  </body>
</html>

Et je veux maintenant afficher chacune des résultats avec une intervalle de temps de 5s, càd que les résultats va s'afficher successivement à chaque 5s, voici le code que j'ai crée avec cette intervalle de temps, mais il y a une erreur sur l'affichage, s'il vous plait pouvez vous me dire pourquoi ça ne marche pas? merci !

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      #container{ background-color: lightgreen; text-align: center ;width: 350px; border:solid 1px black; min-height: 15px}
      #resultat{ background-color: #80BFFF; width: 350px; border:solid 1px black; min-height: 150px}
    </style>
    <script>
      p = new Array();
      function calculer() {
        var affiche=document.getElementById("resultat");
        x=1*document.getElementById("nb_a").value;
        y=1*document.getElementById("nb_b").value;
        p[0]=x;
        p[1]=p[0]*y;
        affiche.innerHTML +="<br/>p["+ 1 +"]=a*b = "+ p[1] +"<br/>";
        
        for (var i = 2; i < 10; i++) {
        k=i-1;
 
 
        var container = document.getElementById('container'),
        timeLeft = 0;
        var timerID = setTimeout(function() 
        { // On crée notre compte à rebours
            clearInterval(intervalID);
        }, 5000);
 
        var intervalID = setInterval(function() { // On met en place l'intervalle pour afficher la progression du temps
            //------------------
        p[i]=p[k]*y;
        affiche.innerHTML +="p["+ i +"]=p["+ k +"]*b = "+ p[i] +"<br/>";
            //------------------
        }, 1000);
 
 
        }
        
      }
    </script>
  </head>
  <body>
    <p>a = <input id="nb_a"></p>
    <p>b = <input id="nb_b"></p>
 
    <input type="button" value="CALCULER" onclick="calculer();"><br/>
 
    <div id="container" >Voici quelques resultats des calculs :</div>
    <div id="resultat" ></div>
 
  </body>
</html>

23/11/2016, 12h45
SpaceFrog

regarde du coté se setTimeout() ou setInterval() ...
23/11/2016, 12h58
tsilavo

je ne comprends pas vraiment ce que vous voulez dire par là, bon, à ma connaissance, ici setTimeout() permet d'appeler la fonction clearInterval() apres 5000ms d'execution de intervalID, et là, le compte à rebours dans intervalID va s'arreter, et c'est là que je veux afficher le resultat. pouvez vous me corriger svp?

Le voici la sortie avec intervalle de temps, j'ai reussi a le programmer et peut etre que quelqu'un le cherchera un jour, alors je le met ici

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
38
39
40
41
42
43
 
 
<html>
<head>
    <title>Chronomètre</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
 
<body>
<center>
 
 
<button onclick="start()">Clique ici</button>
<div id="bip" class="display"></div>
 
<script>
var counterStep =1;
var numberStep = 3;
var intervalId = null;
function action()
{
  clearInterval(intervalId);
  document.getElementById("bip").innerHTML +="Arret <br/>";	
 
}
function bip()
{
 
  document.getElementById("bip").innerHTML +="étape numéro ["+ (counterStep+1) +"]. <br/>";
      counterStep++;
 
}
function start()
{
  document.getElementById("bip").innerHTML +="<br/>étape numéro ["+ 1 +"]. <br/>";
  intervalId = setInterval(bip, 5000);
  setTimeout(action, numberStep * 5000);
 
}	
</script>
</center>
</body>
</html>

Bonjour,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var counterStep =1;
var numberStep = 3;
var intervalId = null;
function action()
{
  clearInterval(intervalId);
  document.getElementById("bip").innerHTML +="Arret <br/>";	
}
function bip()
{
  document.getElementById("bip").innerHTML +="étape numéro ["+ (++counterStep) +"]. <br/>";
}
function start()
{
  if(intervalId!=null) clearInterval(intervalId);
  counterStep = 0;
  intervalId = setInterval(bip, 5000);
  setTimeout(action, (numberStep+1) * 5000);
}

A+.

25/11/2016, 19h34
tsilavo

Merci!! ok, la prochaine fois on discutera des nouvelles problemes!!