IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Comment faire une barre de progression qui redémarre tous les x temps ?


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé Avatar de Dsphinx
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2005
    Messages
    1 082
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2005
    Messages : 1 082
    Par défaut Comment faire une barre de progression qui redémarre tous les x temps ?
    Bonjour,

    J'ai récupéré un code qui permet de faire un "Barre de progression" en javascript, cependant la barre se lance qu'une fois. Je souhaiterais qu'elle recommence 4x par exemple.

    Voici le code :


    Fichier HTML:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <html>
     
    <head>
    	<title>barre de progression</title>
    	<script language="javascript" src="layerAccess.js"></script>
    	<script language="javascript" src="progressBar.js"></script>
    </head>
     
    <body onLoad="commencer()">
    	<script language="javascript"> <!--
    		initProgressBar(990);
     
    		var fini = true;
     
    		function augmenterRegulierement () {
    			if (getProgressBar() != 100) {
    				setProgressBar(getProgressBar()+1);
    				dispProgressBar();
    				setTimeout("augmenterRegulierement()", 10);
    			}
    			else {
    				fini = false;
    			}
    		}
     
    		function commencer()
    		{
    			if (fini) {
    				fini = false;
    				setProgressBar(0);
    				dispProgressBar();
    				augmenterRegulierement();
    			}			
    		}
    	// --> </script>
    </body>
     
    </html>

    LayerAccess.js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    var isDHTML = 0;
    var isLayers = 0;
    var isAll = 0;
    var isID = 0;
    var isBusy = false;
     
    if (document.getElementById) {
    	isID = 1; isDHTML = 1;
    } else {
    	browserVersion = parseInt(navigator.appVersion);
    	if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {
    		isLayers = 1; isDHTML = 1;
    	} else {
    		if (document.all) {
    			isAll = 1; isDHTML = 1;
    		}
    	}
    }
     
    function findDOM(objectID,withStyle) {
    	if (withStyle == 1) {
    		if (isID) {
    			return (document.getElementById(objectID).style);
    		} else {
    			if (isAll) {
    				return (document.all[objectID].style);
    			} else {
    				return getObjNN4(top.document,objectID);
    			}
    		}
    	} else {
    		if (isID) {
    			return (document.getElementById(objectID));
    		} else {
    			if (isAll) {
    				return (document.all[objectID]);
    			} else {
    				if (isLayers) {
    					return getObjNN4(top.document,objectID);
    				}
    			}
    		}
    	}
    }
     
    function getObjNN4(obj,name)
    {
    	var x = obj.layers;
    	for (var i=0;i<x.length;i++)
    	{
    		if (x[i].id == name)
    			return x[i];
    		else if (x[i].layers.length)
    			var tmp = getObjNN4(x[i],name);
    		if (tmp) return tmp;
    	}
    	return null;
    }
     
    function writeToLayer ( id, text )
    {
    	// first we get a reference to the layer we want
    	// to modify
    	x = findDOM( id, 0 );
     
    	if ( !x )
    		return;
    	if ( isLayers ) {
    		// NS4 only allows you to have
    		// one output stream open at a time
    		// so if we are already writing to one
    		// we will try this again in 250 ms.
    		if ( isBusy ) {
    			setTimeout ( "writeToLayer( '" + id + "', '" + text + "' )", 20 );
    		} else {
    			isBusy = true;
    			// write does open for us
    			x.document.write(text);
    			x.document.close();
    			isBusy = false;
    		}
    	} else {
    		x.innerHTML = text;
    	}
    }

    progressBar.js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    var progressBarValue;
    var progressBarWidth;
    var progressBarFG = '#cccccc';
    var progressBarBG = '#3d3c3f';
    var progressBarBorderColor = '#000000';
    var progressBarBorderWidth = 0;
     
    function initProgressBar(width)
    {
    	setProgressBar(0);
    	progressBarWidth = width;
    	document.write('<div id="progressBar">here will be the progress bar</div>');
    	dispProgressBar();
     
    	return true;
    }
     
    function dispProgressBar()
    {
    	var html = '';
    	var td1 = '';
    	var td2 = '';
    	var val = getProgressBar();
     
    	if (val == 0) {
    		td1 = '';
    		td2 = '<td width="100%" align="center"></td>';
    	}
    	else if (val == 100) {
    		td1 = '<td width="100%" bgColor="' + progressBarFG + '" align="center"></td>';
    		td2 = '';
    	}
    	else if (val > 50) {
    		td1 = '<td width="' + val + '%" bgColor="' + progressBarFG + '" align="center"></td>';
    		td2 = '<td width="' + (100-val) + '%"></td>';
    	}
    	else {
    		td1 = '<td width="' + val + '%" bgColor="' + progressBarFG + '"></td>';
    		td2 = '<td width="' + (100-val) + '%" align="center"></td>';
    	}
    	html = '<table border="' + progressBarBorderWidth + '" ';
    	html += 'width="' + progressBarWidth + '" ';
    	html += 'borderColor="' + progressBarBorderColor + '" ';
    	html += 'bgColor="' + progressBarBG + '" ';
    	html += 'cellpadding="5" cellspacing="0">';
    	html += '<tr>' + td1 + td2 + '</tr></table>';
    	writeToLayer('progressBar', html);
    }
     
    function setProgressBar(value)
    {
    	if (value < 0) {
    		progressBarValue = 0;
    	}
    	else if (value > 100) {
    		progressBarValue = 100;
    	}
    	else {
    		progressBarValue = value;
    	}
    	return true;
    }
     
    function getProgressBar()
    {
    	return progressBarValue;
    }
    Y a-t-il une bonne âme qui puisse me dire où mettre une boucle for pour que le script redémarre automatiquement ?

    Merci.

  2. #2
    Membre Expert
    Avatar de Eric2a
    Homme Profil pro
    Technicien
    Inscrit en
    Septembre 2005
    Messages
    1 225
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Technicien

    Informations forums :
    Inscription : Septembre 2005
    Messages : 1 225
    Par défaut
    Salut,

    J'ai retouché le code de manière à ce que tu puisses passer le nombre d'itérations en paramètre à la fonction commencer().

    Code xhtml : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <script type="text/javascript">
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    var
    	progressBarValue,progressBarWidth,progressBarDelay,progressBarCount,progressBarElt,
    	progressBarBorderWidth=0,progressBarFG='#cccccc',progressBarBG='#3d3c3f',progressBarBorderColor='#000000';
     
    function dispProgressBar(){
    	var html='',td1='',td2='';
     
    	if(progressBarValue==0){
    		td2='<td width="100%"></td>';
    	}else if(progressBarValue==100){
    		td1='<td width="100%" style="background-color:' +progressBarFG+ '"></td>';
    	}else{
    		td1='<td width="' +progressBarValue+ '%" style="background-color:' +progressBarFG+ '"></td>';
    		td2='<td width="' +(100-progressBarValue)+ '%"></td>';
    	}
     
    	html ='<table border="' +progressBarBorderWidth+ '" ';
    	html+='width="' +progressBarWidth+ '" ';
    	html+='style="border-color:' +progressBarBorderColor+ ';background-color:' +progressBarBG+ '" ';
    	html+='cellpadding="5" cellspacing="0">';
    	html+='<tr>' +td1+td2+ '</tr></table>';
     
    	progressBarElt.innerHTML=html;
    }
     
    function augmenterRegulierement(){
    	dispProgressBar();
    	progressBarValue+=1;
    	if(progressBarValue>100){
    		progressBarValue=0;
    		progressBarCount--;
    	}
    	if(progressBarCount)setTimeout(augmenterRegulierement,progressBarDelay);
    }
     
    function commencer(width,count,delay){
    	if(width>0&& count>0&& delay>0){
    		progressBarElt=document.createElement('div');
    		document.getElementsByTagName('body')[0].appendChild(progressBarElt);
    		progressBarValue=0;
    		progressBarWidth=width;
    		progressBarCount=count;
    		progressBarDelay=delay;
    		augmenterRegulierement();
    	}
    }
     
    window.onload=function(){
    	commencer(
    		900,	// Largeur en pixels
    		  2,	// Itérations
    		 10	// Vitesse en millisecondes
    	);
    };
    Code xhtml : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    </script>
    </head>
    <body>
    </body>
    </html>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [VCL] Comment faire une barre d'outils skinable comme FireFox ?
    Par DarkChamallo dans le forum Composants VCL
    Réponses: 23
    Dernier message: 07/05/2008, 18h03
  2. comment faire une barre d'évaluation ?
    Par jey182 dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 20/04/2007, 15h15
  3. Réponses: 2
    Dernier message: 20/10/2006, 20h41
  4. Comment faire une Barre de Menu?
    Par gamerome dans le forum OpenGL
    Réponses: 5
    Dernier message: 18/02/2005, 14h46
  5. Indy FTP (idFTP) faire une barre de progress de transfert
    Par Harry dans le forum Web & réseau
    Réponses: 4
    Dernier message: 09/07/2004, 13h15

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo