Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

bcs_ptx

Barra de progresso

Por , em Javascript

Recommended Posts

bcs_ptx    0

bcs_ptx
Postado 
 <script type="text/javascript">
	var progresso = new Number();
	var maximo = new Number();
	var progresso = 0;
	var maximo = 100;
	function start(){
		if((progresso + 1) < maximo){
			progresso = progresso + 1;
			document.getElementById("pg").value = progresso;
			setTimeout("start();", 30);
		}
	}
</script>

<body onload="start();">
	
   <progress max="100" id="pg"></progress>
   
</body>

Nesse script eu dou um tempo fixo para a pagina na linha setTimeou, como eu faço para esse barra carregar conforme o tempo de load da pagina?

Compartilhar este post

Link para o post
Compartilhar em outros sites

bcs_ptx    0

bcs_ptx
Postado

Beleza cara, mas assim, ele começa a carregar só depois que a pagina ja carregou, tipo, segue o exemplo que eu fiz, ele mostra o progresso só depois que lista todos os números aparecem na tela

 

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>  
  
<style type='text/css'>@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');</style>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    setTimeout(function(){

        $('.bar').each(function() {
            var me = $(this);
            var perc = me.attr("data-percentage");

            //TODO: left and right text handling

            var current_perc = 0;

            var progress = setInterval(function() {
                if (current_perc>=perc) {
                    clearInterval(progress);
                } else {
                    current_perc +=1;
                    me.css('width', (current_perc)+'%');
                }

                me.text((current_perc)+'%');

            }, 50);

        });

    },300);
});//]]>  

</script>

<div class="progress progress-striped active" style="width:150px;">
    <div class="bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"data-percentage="100" style="width: 0"></div>
</div>

<?php for($i = 0; $i <= 1000; $i++ ){echo $i.'<br>'; } ?>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Edultra    13

Edultra
Postado

Legal entendi, mas vamos lá então você entendeu que dentro de tuto isso a função que faz que atualize o tamanho e a porcentagem na tela é isso aqui:

 me.css('width', (current_perc)+'%');

 me.text((current_perc)+'%');

 

que seria o mesmo que:

 

$('.bar').css('width', (current_perc)+'%');

$('.bar').text((current_perc)+'%');

Só que fora da função, crie uma função assim:

 

<script type='text/javascript'>//<![CDATA[ 
var current_perc = 0;
$(window).load(function(){
    function aumenta(){
        current_perc++;
        $('.bar').css('width', (current_perc)+'%');
        $('.bar').text((current_perc)+'%');
    }
});//]]>

E no seu php coloque:

<?php for($i = 0; $i <= 100; $i++ ){echo $i.'<br><script>aumenta();</script>'; } ?>

E veja e diga o que acontece... e poste aqui pra nós... não sei se é o método mais certo...



Dã... tire essa parte do window load :

<script type='text/javascript'>//<![CDATA[ 
var current_perc = 0;
    function aumenta(){
        current_perc++;
        $('.bar').css('width', (current_perc)+'%');
        $('.bar').text((current_perc)+'%');
    }
//]]>
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

bcs_ptx    0

bcs_ptx
Postado

blza, mas isso ele muda a porcentagem conforme for o valor do for, se for 100 é 100% mas se for 1000% é 1000%



e tipo, for é um exemplo, queria que pegasse o tempo de carregamento de qualquer pagina, até mesmo com uma consulta sql

Compartilhar este post

Link para o post
Compartilhar em outros sites

Edultra    13

Edultra
Postado

Dai teria que fazer um cálculo, mas para isso teria que saber o tamanho total da consulta, bem vamos lá.

 

Fazer uma regra de 3 para saber o total, o calculo ficará assim porcentagem = total/executado*100;

 

Sendo que a porcentagem deve ser arredondada, para termos uma exibição melhor, no javascript utilizamos o método round.

 

Bem vamos lá por mão na massa para isso criei dois arquivos um com o resultado e outro com a barra testei aqui e funcionou:

 

Criei o index.php :

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style type='text/css'>
	@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
</style>
<script type='text/javascript'>
    var current_perc = 0;
    var total = 0;
    function setatamanho(t) {
        total = t;
    }

    function aumenta() {
        current_perc++;
        percentual =  Math.round(total/current_perc*100);
        $('.bar').css('width', (percentual) + '%');
        $('.bar').text((percentual) + '%' + ' de ' + total + ' registros ');
    }

$(document).ready(function() {
            $("#conteudo").load("carregando.php");
});


</script>

<div class="progress progress-striped active" style="width:1000px;">
	<div class="bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" data-percentage="1000" style="width: 0"></div>
</div>
<div id="conteudo">

</div>

E o carregando.php que será carregado por ajax do jquery:

 

<?php 
$tamanho = 1000;
echo "<script>setatamanho(".$tamanho.")</script>";
for($i = 0; $i <= $tamanho; $i++ ){
		
	echo $i.'<br><script>aumenta();</script>'; 
	sleep(0.5);
} 

?>

A variável tamanho deve ser a quantidade de linhas do seu resultado, e adicionei o sleep para mostrar melhor o carregamento da barra, você pode tirar isso quando for utilizar com o seu código.

Compartilhar este post

Link para o post
Compartilhar em outros sites

henrique1205    0

henrique1205
Postado

queria fazer o seguinte.. tenho um site que mostra quantos players estão online..

queria fazer um script que, quando aumentar +1 o numero de player online..aumentar o width da barra.. que é uma imagem que eu tenho de width="189" height="47"

 

e ao mesmo tempo quando diminuir -1 o numero de players .. diminuir o width da barra

 

alguem pode ajudar ai?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ricardo TB    0

Ricardo TB
Postado

Gostei muito da sequencia programacional mas ainda não consigo fazer o progressbar funcionar junto com o loop do for veja:

for ($i = 1; $i <= $conta_no; $i++) {
         echo "<script>aumenta()</script>";
        sleep(0.5);
        $sqlup = "INSERT INTO nomes (nome_alu, aniver, rga)";
        $sqlup = "$sqlup VALUES('${"aluno$i"}', '${"aniv$i"}', '${"rga$i"}')";
            if ($con->executeUpdate($sqlup) == 1){
               $isInclu = 'TRUE';
            }else{
              $isInclusao = 'FALSE';
           }

 }

alguém pode me ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito