Démarrer une série d'événements au click
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:
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
