[PHP/JavaScript] Barre de progression
Résolu/Fermé
b0n0m
Messages postés
3
Date d'inscription
mercredi 1 avril 2009
Statut
Membre
Dernière intervention
2 avril 2009
-
1 avril 2009 à 22:44
MahassenBenchikha Messages postés 1 Date d'inscription mardi 24 juin 2014 Statut Membre Dernière intervention 24 juin 2014 - 24 juin 2014 à 17:27
MahassenBenchikha Messages postés 1 Date d'inscription mardi 24 juin 2014 Statut Membre Dernière intervention 24 juin 2014 - 24 juin 2014 à 17:27
A voir également:
- Barre de progression php
- Windows 11 barre des taches a gauche - Guide
- Easy php - Télécharger - Divers Web & Internet
- Égal barré ✓ - Forum Word
- Caractère "différent" ou "pas égal à" - Forum Bureautique
- Barre verticale clavier - Forum Excel
7 réponses
gaerebut
Messages postés
1017
Date d'inscription
mardi 30 octobre 2007
Statut
Membre
Dernière intervention
22 novembre 2013
171
2 avril 2009 à 03:21
2 avril 2009 à 03:21
Bon,
j'ai fais une petite démo, désolé ça a pris un peu plus que 30min finalement ! lol
donc voici le code suivis de la démo (je l'est mis sur mon site pour voir le résultat :p)
Comme tu peux le voir, le code javascript est très court !
C'est juste un algorithme pas très compliqué.
Voici la démo : http://infotuto.freeheberg.com/ccm/progression.html
Voila, demande si tu as des questions.
Mais bon, essaye de chercher un peu par toi même avant, il y a rien de meilleur ! ^^
A+
Gaerebut
j'ai fais une petite démo, désolé ça a pris un peu plus que 30min finalement ! lol
donc voici le code suivis de la démo (je l'est mis sur mon site pour voir le résultat :p)
<html>
<head>
<title>Barre de progression</title>
<style type="text/css">
body{
margin-left: auto;
margin-right: auto;
text-align:center;
}
.cadre{
margin-top: 250px;
margin-left: auto;
margin-right: auto;
text-align:center;
height: 50px;
width: 900px;
border: 1px solid black;
}
#barre{
height: 50px;
width: 0px;
background-color: red;
}
.texte{
text-align: center;
font-size: 26px;
font-weight: bold;
}
</style>
<script type="text/javascript">
var i=0;
function progression(timer){
if(i<=parseInt(document.getElementById('cadre').clientWidth)){
var compteur=0;
document.getElementById("barre").style.width=i+"px";
while(compteur<=100)
compteur++;
if(i>40)
document.getElementById("pourcentage").innerHTML=parseInt(i/(parseInt(document.getElementById('cadre').clientWidth)/100))+"%";
setTimeout("progression();", timer);
i++;
}
else
alert("Chargement Termine! Vous pourriez ensuite envisager d'utiliser une iframe pour afficher votre site ...");
}
</script>
</head>
<body onload="progression()">
<noscript class="cadre">Vous devez activer le Javascript pour pouvoir visiter ce site !</noscript>
<div class="cadre" id="cadre">
<div id="barre">
<span class="texte" id="pourcentage"></span>
</div>
<br /><br />
<div class="texte">Chargement en cours ...</div>
</div>
</body>
</html>
Comme tu peux le voir, le code javascript est très court !
C'est juste un algorithme pas très compliqué.
Voici la démo : http://infotuto.freeheberg.com/ccm/progression.html
Voila, demande si tu as des questions.
Mais bon, essaye de chercher un peu par toi même avant, il y a rien de meilleur ! ^^
A+
Gaerebut
gaerebut
Messages postés
1017
Date d'inscription
mardi 30 octobre 2007
Statut
Membre
Dernière intervention
22 novembre 2013
171
2 avril 2009 à 00:03
2 avril 2009 à 00:03
Salut,
Est-ce qu'il sagirai d'une barre qui évolue dynamiquement ou d'une barre qui évolue quand on rafraichis la page (clique sur un lien par exemple).
Parce que si c'est le deuxième cas, utilise la bibliothèque GD en php, c'est pas bien dur :)
A+
Gaerebut
Est-ce qu'il sagirai d'une barre qui évolue dynamiquement ou d'une barre qui évolue quand on rafraichis la page (clique sur un lien par exemple).
Parce que si c'est le deuxième cas, utilise la bibliothèque GD en php, c'est pas bien dur :)
A+
Gaerebut
b0n0m
Messages postés
3
Date d'inscription
mercredi 1 avril 2009
Statut
Membre
Dernière intervention
2 avril 2009
2 avril 2009 à 00:07
2 avril 2009 à 00:07
Non, hélas, ce serait le premier cas.
Une barre qui évolue dynamiquement. Qui se remplirait, au bout d'un délai modifiable, jusqu'au bout.
Le tout sans recharger la page...
Merci quand meme pour ta réponse rapide !
Une barre qui évolue dynamiquement. Qui se remplirait, au bout d'un délai modifiable, jusqu'au bout.
Le tout sans recharger la page...
Merci quand meme pour ta réponse rapide !
gaerebut
Messages postés
1017
Date d'inscription
mardi 30 octobre 2007
Statut
Membre
Dernière intervention
22 novembre 2013
171
2 avril 2009 à 00:23
2 avril 2009 à 00:23
ok,
ben il faut le faire en Javascript alors !
Je veux bien essayer de te préparer un petit truc, tu me dira ce que t'en pense... lol
Tu prendra les idée si c'est ça que tu veux !
Dans 30min je te dirais !
A toute à l'heure
A+
Gaerebut
ben il faut le faire en Javascript alors !
Je veux bien essayer de te préparer un petit truc, tu me dira ce que t'en pense... lol
Tu prendra les idée si c'est ça que tu veux !
Dans 30min je te dirais !
A toute à l'heure
A+
Gaerebut
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
khalad
Messages postés
4
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
31 mai 2009
1
31 mai 2009 à 19:14
31 mai 2009 à 19:14
Bonjour,
Votre script est très intéressant, mais maintenant, j'aimerais l'adapter en fonction d'une durée personnalisé. J'ai une durée en timestamp, et j'aimerais que cette barre symbolise le temps de progression entre la date 1 et la date 2, et une fois que c'est fini, ca insère dans une base de sonnée MySql les informations.
Je n'ai pas réussi a comprendre comment changer les valeurs de temps pour adapter le chargement.
Si vous pouviez m'aider un peu merci :)
Votre script est très intéressant, mais maintenant, j'aimerais l'adapter en fonction d'une durée personnalisé. J'ai une durée en timestamp, et j'aimerais que cette barre symbolise le temps de progression entre la date 1 et la date 2, et une fois que c'est fini, ca insère dans une base de sonnée MySql les informations.
Je n'ai pas réussi a comprendre comment changer les valeurs de temps pour adapter le chargement.
Si vous pouviez m'aider un peu merci :)
MahassenBenchikha
Messages postés
1
Date d'inscription
mardi 24 juin 2014
Statut
Membre
Dernière intervention
24 juin 2014
24 juin 2014 à 17:27
24 juin 2014 à 17:27
j'ai une question rapide : comment déclarer les paramétres déja dans ma base au niveau du code javascript ! par exemple dans ce code
<script type="text/javascript">
WEBROOT = window.location.origin + '/Test';
function modifValues(date1, date2){
function dateDiff(date1, date2){
var diff = {} // Initialisation du retour
var tmp = "y:m:d h:i:s" - #D_T;
tmp = Math.floor((tmp-diff.sec)/60); // Nombre de minutes (partie entière)
diff.min = tmp % 60;
$( "#progressbar" ).progressbar({ value: (tmp-val.D_T)/(val.W_D) });
});
echo val.D_T;
echo val.W_D;
var val = $('#progress progress').attr('value');
var txt = Math.floor(newVal)+'%';
$('#progress progress').attr('value',newVal).text(txt);
$('#progress strong').html(txt);
}
2 avril 2009 à 19:42
Je te remercie, je ne connais pas du tout le JavaScript mais malgré ça, il est facile de comprendre le fonctionnement de l'algorithme.
Merci encore,
b0n0m
Modifié par potitoza le 2/09/2011 à 18:50
Merci pour tes lumière, je suis a peine débutant moi.
1 comment lier ton programme au chargement d'une iframe
J'ai beau fouiller je reste planté la je joint mon lien de page, tu verra la e frame met entre 4 et 6 secondes pour charger d'ou la nécessité de mettre une barre de charge.