Démarrer une série d'événements au click

**isiodith** · 26/02/2014, 12h12

Bonjour,

je travaille actuellement sur la réalisation d'un comparatif de temps de chargement et pour se faire j'utilise une barre de progression animée en java script pour un effet visuel. Je souhaite que le visiteur clique sur un bouton et que l'animation démarre.

Mon soucis est que j'arrive à lancer l'animation sans problème au chargement de la page, mais pas au clique de la souris (je suis débutant en jquery/JS).

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>demo</title>
	<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
 
 
		function modifValues(){
    	var val = $('#progress progress').attr('value');
    	if(val>=100){val=100;}
    	var newVal = val*1+0.25;
    	var txt = Math.floor(newVal)+'%';      
    	$('#progress progress').attr('value',newVal).text(txt);
    	$('#progress strong').html(txt);
    	}
 
		setInterval(function (){ modifValues(); },40)
 
	</script>
</head>
<body>
 
 	<p><button>Run</button></p>
	<div >ADSL</div>
	<div id="progress">
    	<p>Retrieving data...<strong>0%</strong></p>
    	<progress value="5" min="0" max="100">0%</progress>
	</div>
 
</body>
</html>

Merci de votre aide

**bapfuror** · 26/02/2014, 15h37

Il suffit d'utiliser la fonction click disponible

Ce qui va te donner un code de ce style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
 $(document).ready(function(){
	$('#bt_run').click(function() {
		setInterval(function (){ modifValues(); },40)
	});
 });

en ajoutant bien sûr un id sur ton button dans le html.

Après il te reste à gérer de ne pas pouvoir cliquer 2 fois sur le boutton run sinon les appels vont se cumuler, de plus il faudrait que tu modifies ta façon de faire pour éviter que la fonction modifValues s'appelle toujours quand les 100% sont atteint

**isiodith** · 26/02/2014, 16h14

merci de ta réponse bapfuror.

j'ai essayer cette méthode sans succès (surement une erreur de ma part)

je viens juste de trouver une solution (peut être pas la meilleur)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
 
function chargement() {
 
		setInterval(function (){ modifValues(); },40);
 
 
}
function modifValues(){
    var val = $('#progress progress').attr('value');
    if(val>=100){val=100;}
    var newVal = val*1+0.25;
    var txt = Math.floor(newVal)+'%';      
 
    $('#progress progress').attr('value',newVal).text(txt);
    $('#progress strong').html(txt);
    clique=0
}
</script>
<input type="submit" value="go"id="button" width="220" height="220" onclick="chargement()">
<div class="float">ADSL</div>
<div id="progress">
    <p>Retrieving data...<strong>0%</strong></p>
    <progress value="5" min="0" max="100">0%</progress>

pour l'arret de la fonction modifValues j'ai vu sur l'api jquery qu'on pouvait arrêter une fonction une fois une variable atteinte. Mais quel est la meilleur solution ? rajouter un when (value=100) newVal = 0 ?

Je ne suis pas encore penché sur la question et un avis m'aidera surement à y voir plus clair