|
|
|
|
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
Configuration: Mac OS X Safari 525.27.1
Salut,
|
Ok,
|
Bon,
<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 Il y a 2 règles d'or pour réussir dans la vie : -Règle 1: ne jamais dire tout ce que l'on sait... -Règle 2: ... |
Bonjour,
|
Barre d'outil google Barre de progression vb.net Barre de traduction Calendrier php javascript Date php javascript horloge dynamique History back javascript sans variables php Javascript les fonctions php Javascript masquer barre adresse Javascript string O barré Passer une matrice php javascript Php activex Php appel fonction javascript Php formulaire Php javascript Php post with javascript Programmer un affichage en liste sous php Telecharger progdvb
