Barre de chargement JQuery

Version imprimable

Bonjour,

Je cherche à adapter ce script:

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
54
<!DOCTYPE html>
<html>
<head>
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<?PHP
                        $sql10 = "SELECT * FROM niveaux WHERE niveau='1'";
                        $req10 = mysql_query($sql10) or die('Erreur SQL !<br>'.$sql10.'<br>'.mysql_error());
                        while($data = mysql_fetch_assoc($req10))
                        {
                                $tempsensecs=$data['tempsensecs'];
                                $niveau=$data['niveau'];
                        }       
                        ?>
<script>
$(document).ready(function() {
 
        var MaBarreProgression = $('#MaBarreProgression'),
            max = MaBarreProgression.attr('max'),
            time = 1000, 
            value = MaBarreProgression.val();
 
        var Telechargement = function() {
            value += 1;
            addValue = MaBarreProgression.val(value);
 
            $('.progress-value').html('Téléchargement '+ value + '%');
 
            if (value == max) {
                clearInterval(animation);   
                $('.progress-value').html('Téléchargement Terminé !');                 
            }
        };
 
        var animation = setInterval(function() {
            Telechargement();
        }, time);
 
});
</script>
 
</head>
<body>
 
<progress id="MaBarreProgression" value="0" max="100"></progress>
<br>
<span class="progress-value">Téléchargement 0%</span>
 
</body>
</html>

Avec un temps définie par cette variable sortie de la base de données:
$tempsensecs=395secondes;

Merci pour votre aide.

Comme ceci tous simplement non ?

Code:

time = '<?php echo $tempsensecs; ?>',

Code en entier ci-dessous.

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
54
<!DOCTYPE html>
<html>
<head>
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<?PHP
                        $sql10 = "SELECT * FROM niveaux WHERE niveau='1'";
                        $req10 = mysql_query($sql10) or die('Erreur SQL !<br>'.$sql10.'<br>'.mysql_error());
                        while($data = mysql_fetch_assoc($req10))
                        {
                                $tempsensecs=$data['tempsensecs'];
                                $niveau=$data['niveau'];
                        }       
                        ?>
<script>
$(document).ready(function() {
 
        var MaBarreProgression = $('#MaBarreProgression'),
            max = MaBarreProgression.attr('max'),
            time = '<?php echo $tempsensecs; ?>', 
            value = MaBarreProgression.val();
 
        var Telechargement = function() {
            value += 1;
            addValue = MaBarreProgression.val(value);
 
            $('.progress-value').html('Téléchargement '+ value + '%');
 
            if (value == max) {
                clearInterval(animation);   
                $('.progress-value').html('Téléchargement Terminé !');                 
            }
        };
 
        var animation = setInterval(function() {
            Telechargement();
        }, time);
 
});
</script>
 
</head>
<body>
 
<progress id="MaBarreProgression" value="0" max="100"></progress>
<br>
<span class="progress-value">Téléchargement 0%</span>
 
</body>
</html>

22/08/2018, 18h54
Skyth

Merci !
Oui effectivement en rajoutant un '0' à la fin
Et maintenant il me faut
1. afficher ce compteur time dessous la barre de de chargement
2. enregistrer dans la base de données si on quitte le script ou la page, le temps restant
3. reprendre la barre dans une actualisation au temps restant
Si on fait le 3. alors le 2. devient facultatif
Merci beaucoup pour votre aide, je ne suis pas callé en JS et JQuery