[PHP/JavaScript] Barre de progression
Résolu
b0n0m
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
MahassenBenchikha Messages postés 1 Date d'inscription Statut Membre Dernière intervention -
MahassenBenchikha Messages postés 1 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Malgré de longues heures de recherches, je n'ai pas réussi à réaliser une barre de progression en fonction du temps.
En effet, le site que je réalise se décompose en plusieurs périodes de même durée. J'aimerais qu'une barre de progression "temporelle" puisse s'afficher, dont le délai de remplissage total soit parametrable.
Auriez-vous quelques pistes à me donner?
Merci d'avance,
b0n0m
Malgré de longues heures de recherches, je n'ai pas réussi à réaliser une barre de progression en fonction du temps.
En effet, le site que je réalise se décompose en plusieurs périodes de même durée. J'aimerais qu'une barre de progression "temporelle" puisse s'afficher, dont le délai de remplissage total soit parametrable.
Auriez-vous quelques pistes à me donner?
Merci d'avance,
b0n0m
A voir également:
- Barre de progression php
- Windows 11 barre des taches a gauche - Guide
- Barre de défilement - Guide
- Barré whatsapp - Guide
- Barre verticale mac - Forum MacOS
- Barre clavier - Forum Excel
7 réponses
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
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
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 !
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
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 :)
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);
}
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
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.