Test

Soyez le premier à donner votre avis sur cette source.

Snippet vu 2 095 fois - Téléchargée 4 fois

Contenu du snippet

<html>
<head>
<title> new document </title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="progressBar.jQuery.js"></script>
<style type="text/css">@import url(progressBar.jQuery.css);</style>
<script language="javascript">
<!--

var compteur = 60;

function update_progressBar(valeur) {
/* params are name:default
orientation:'vertical', // 'vertical' ou 'horizontal' -> orientation de la progress bar
value:0 // valeur par défaut de la progress bar
max:100 // valeur maximum possible
rows:30 // nombre de lignes pour l'affichage


/


$('#progress1').progressBar( { value:valeur , rows:60} );
$('#progress2').progressBar( { value:valeur/2 } );
$('#progress3').progressBar( { value:valeur/3 } );
$('#progress4').progressBar( { value:valeur , orientation:'horizontal'} );
$('#progress5').progressBar( { value:valeur/2 , orientation:'horizontal'} );
$('#progress6').progressBar( { value:valeur/3 , orientation:'horizontal'} );

if (compteur<=100) {
window.setTimeout ("update_progressBar(" + compteur++ + ")", 120 ); // toute les second
}
}

$(document).ready(function () {
window.setTimeout ("update_progressBar(compteur)", 60 ); // toute les second
});

//-->
</script>

<style>
/* red progress bar*/
#progress2 td.progressBar-off { background-color:#600; }
#progress2 td.progressBar-on { background-color:#f00; }
#progress2 td.progressBar-value { color:#f00; }

/* yellow progress bar */
#progress3 td.progressBar-off { background-color:#660; }
#progress3 td.progressBar-on { background-color:#ff0; }
#progress3 td.progressBar-value { color:#ff0; }

/* maroon progress bar */
#progress4 td.progressBar-off { background-color:maroon; }
#progress4 td.progressBar-on { background-color:peru; }
#progress4 td.progressBar-value { color:peru; }

/* blue progress bar */
#progress5 td.progressBar-off { background-color:MidnightBlue ; }
#progress5 td.progressBar-on { background-color:DeepSkyBlue ; }
#progress5 td.progressBar-value { color:DeepSkyBlue ; }

/* white progress bar */
#progress6 td.progressBar-off { background-color:DimGray ; }
#progress6 td.progressBar-on { background-color:white; }
#progress6 td.progressBar-value { color:white; }
</style>
</head>

<body style="background-color:black;color:red;">

<div id="progress1" style="position: relative; float: left;"></div>
<div id="progress2" style="position: relative; float: left;"></div>
<div id="progress3" style="position: relative; float: left;"></div>
<br style="clear:both;"/>
<br style="clear:both;"/>
<div id="progress4"></div>
<div id="progress5"></div>
<div id="progress6"></div>
</body>
</html>

A voir également

Ajouter un commentaire

Commentaire

Whismeril
Messages postés
13524
Date d'inscription
mardi 11 mars 2003
Statut
Contributeur
Dernière intervention
23 juillet 2019
289 -
Salut ça marche ;)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.