11498 sujets

JavaScript, DOM et API Web HTML5

[PHP] Créer barre de progression programmable

Bonjour,

J'aimerai créer une barre de progression qui soit programmable, c'est à dire que celle-ci défile pour un temps donné (exemple : pour une durée de 15 minutes). Ainsi dès que je l'activerai elle défilerai pendant x minutes et actualiser la page n'aura aucun impact sur sa progression (pas de retour à 0).

Difficile à expliquer mais pour vous donner une idée je voudrais une barre comme la barre timelime de cette page http://www.tf1.fr/live/# ou http://www.france4.fr/. Toutes mes recherches m'ont amené sur des scripts pour des barres d'upload ou avec un retour a 0 à chaque actualisation.

J'avais trouvé ce code intéressant sur le web, mais il s'actualise à chaque changement de page ou rafraichissement et je n'arrive pas à le modifier pour changer le temps de progression. 

<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=100;
			function progression(timer){
				if(i<=parseInt(document.getElementById('cadre').clientWidth)){
					var compteur=100;
					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("Texte");
			}
		</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>


Merci de votre aide
tu peux essayer de te pencher du coté de jquery avec la fonction unload associé au localstorage html5 pour utiliser la valeur courante du timer dans un cookie
On m'a aidé à développer ce code, la barre apparaît bien mais au niveau de la progression ça coince. 

<body>
    <div id="progress" style="width: 100% ; border: 1px solid black ;">
        <div id="barre" style="height: 10px ; background-color: blue ;"></div>
    </div>
          
    <script type="text/javascript">
 
<?php
 
    $start = strtotime('2013-08-09 21:00') ;
    $end = strtotime('2013-08-09 23:00') ;
 
?>
 
    var startTime = <?php echo json_encode($start) ; ?> ;
    var startTime = <?php echo json_encode($end) ; ?> ;
  
    function updateBar () {
        var current = new Date().getTime() / 1000 ;
        var percent = parseInt(100 * (current - start) / (end - start)) ;
        document.getElementById('barre').style.width = percent + '%' ;
    }
   
    /* On rafraichit dès le début. */
    updateBar() ;
   
    /* On rafraichit toutes les secondes. */
    setInterval(updateBar, 1000) ;
 
    </script>
 
</body>
Sujet clos
Aller à