Barre de chargement JQuery

**Skyth** · 22/08/2018, 18h25

Bonjour,

Je cherche à adapter ce script:

Code HTML :

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
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.

**runner77** · 22/08/2018, 18h39

Comme ceci tous simplement non ?

Code :

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

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

Code en entier ci-dessous.

Code HTML :

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
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>

**Skyth** · 22/08/2018, 18h54

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

Barre de chargement JQuery

jQuery

Discussions similaires

Partager

Partager