barra de progreso

emuso88 · #1 (**permalink**) 23/10/2010, 09:22

buenas tardes, quisiera saber como hacer una barra de progreso que vaya aumentando poco a poco sin recargar la pagina, es decir.

son las 6:30 horas y tengo en la BD que un proyecto va a terminar a las 7:00 pues como hago para que se muestre una barra que vaya aumentando poco a poco?

THANKS!!

eits · #2 (**permalink**) 23/10/2010, 09:28

Cita:

Iniciado por emuso88

buenas tardes, quisiera saber como hacer una barra de progreso que vaya aumentando poco a poco sin recargar la pagina

puedes usar ajax o javascript, cualquiera de los dos junto con css, yo utilizaría ajax para tener mas control del tiempo y fecha, ya que como es en el servidor, el cliente no puede manipular los tiempos a diferencia que lo hagas solo con javascript, si el usuario cambia la fecha y hora de su equipo ya no será real lo que muestre la página.

saludos.

jcxnet · #3 (**permalink**) 23/10/2010, 10:08

mira si te sirve esta http://skunkworks.ivanvanderbyl.com/

emuso88 · #4 (**permalink**) 23/10/2010, 11:24

si, pero donde podria encontrar un ejemplo en ajax?

yoseman1 · #5 (**permalink**) 23/10/2010, 12:32

Hola,

Yo lo haría con javascript.

para crear una barra con javascript es muy sencillo:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
	<HTML>
	<HEAD>
		<TITLE> New Document </TITLE>
		<script>
			temporizador=1;
			iteracioncadaXmilisegundos=1000; // cada 1 segundo - 1000 milisegundos se incrementa la barra
			milisegundosMaximo=10000;  // a los 10 segundos 10000 milisegundos el intervalo se para.
			var myInterval = window.setInterval
			(
				function (a,b) 
				{
					temporizador+=10;
					document.getElementById("barra").style.width=temporizador+"px";
					
				}
				,iteracioncadaXmilisegundos
			);

			window.setTimeout
			(
				function (a,b) 
				{
					document.getElementById("barra").style.background="red";
					clearInterval(myInterval);
				}
				,milisegundosMaximo
			);
		</script>
	</HEAD>

	<BODY>
	<span id="barra" style="display:block;background-color:black;width:0px;" ></span>
	</BODY>
</HTML>

Lo que pasa es que a la carga de página tienes que coger de la base de datos o de dónde esté la información de tiempo restante y configurar el intervalo de javascript.

Por ejemplo si al cargar la página quedan 30 minutos y quieres que la barra aumente cada minuto

Código HTML:

			iteracioncadaXmilisegundos=60*1000; 
			milisegundosMaximo=30*60*1000;

Con esto ya tendrias un punto de partida.

Ajax, bueno ajax sería llamar a un script en php que te devuelva cuando tiempo queda, pero si configuras el clearInterval al cargar la página lo mismo ni hace falta.

Esto que te pongo es sólo un punto de partida que seguramente tendrás que toquetear.

(yo no soy un experto en javascript lo mismo no es la forma más correcta de hacerlo pero lo mismo te sirve de algo)

Un saludo.

emuso88 · #6 (**permalink**) 23/10/2010, 12:47

y como seria un contador regresivo? es decir lo de te quedan 6, 5, 4.... eso. creo que seria mas facil no? por que la verdad, no se mucho y con lo otro m estoy haciendo la picha un lio

emuso88 · #7 (**permalink**) 24/10/2010, 05:21

Código PHP:

Ver original<?php 
include("conex.php");
mysql_connect("$server", "$dbusername", "$dbpass") or die(mysql_error());
mysql_select_db("$dbname") or die(mysql_error());
$result = mysql_query("SELECT * FROM time") or die(mysql_error());  
$row = mysql_fetch_array( $result );
    // Print out the contents of each row into a table
    $hour=$row['ho'];
    $minute=$row['mi'];
    $second=$row['se'];
    
    echo"s-$second m-$minute h-$hour";
 ?>
<script language="javascript">
<!--
//Codigo que muestra una cuenta atras hasta finalizar el tiempo indicado
//La Web del Programador
//http://www.lawebdelprogramador.com
 
//variables que determinan el tital de horas, minutos y segundos para la cuenta atras
toHour= <?php echo $hour; ?> ;
toMinute= <?php echo $minute; ?> ;
toSecond= <?php echo $second; ?> ;
 
//cuenta atras
function countDown()
{
    toSecond=toSecond-1;
    if(toSecond<0)
    {
        toSecond=59;
        toMinute=toMinute-1;
    }
    form.second.value=toSecond;
 
    if(toMinute<0)
    {
        toMinute=59;
        toHour=toHour-1;
    }
    form.minute.value=toMinute;
 
    form.hour.value=toHour;
    if(toHour<0)
    {
        //final
        form.second.value=0;
        form.minute.value=0;
        form.hour.value=0;
    window.location.href='pagina.php'; //////////////Aqui nos envia a la pagina
    }else{
        setTimeout("countDown()",1000);
    }
}
-->
</script>
 
<style type="text/css">
.form_input
{
    font-family: Verdana;
    font-size: 12;
    color: #ffffff;
    border-width: 0;
    background-color: #000077;
    text-align: right;
}
</style>
</head>
 
<body onload="countDown();">
<form name="form">
    Tiempo restante...: 
    <input type="text" size="5" class="form_input" name="hour" disabled>:
    <input type="text" size="5" class="form_input" name="minute" disabled>:
    <input type="text" size="5" class="form_input" name="second" disabled>
</form>

he echo esto, pero sera fiable con el tiempo del servidor no? ya que solo coje al principio los datos de la base de datos y luego es un puro javascript sin volver a ver la bd.

esto seria con numeros, pero como le pondria una barra de estas en javascript que va aumentando?