contador hacia atras con barra progreso

[susaninhax]

Buenas compañeros;

No se mucho de javascript, pero me gustaría saber si se puede hacer esto y alguien sabe como hacerlo.

Necesito hacer un contador hacia atrás, que valla de 1 minuto a 0 segundos. y que a su vez se vea reflejado en una barra de progreso o un reloj o algo así.

Alguien podría decirme un ejemplo o algo que conozcais que lo haga???????

Estaría muyyy agradecida.

Muchas gracias de antemano - susaninhax -

[susaninhax]

Bueno he econtrado este en concreto:

Código HTML:

var loadedcolor='darkgray' ;       // PROGRESS BAR COLOR
var unloadedcolor='lightgrey';     // COLOR OF UNLOADED AREA
var bordercolor='#FFFFFF';            // COLOR OF THE BORDER
var barheight=10;                  // HEIGHT OF PROGRESS BAR IN PIXELS
var barwidth=250;                  // WIDTH OF THE BAR IN PIXELS
var waitTime=60;                   // NUMBER OF SECONDS FOR PROGRESSBAR

// THE FUNCTION BELOW CONTAINS THE ACTION(S) TAKEN ONCE BAR REACHES 100%.
// IF NO ACTION IS DESIRED, TAKE EVERYTHING OUT FROM BETWEEN THE CURLY BRACES ({})
// BUT LEAVE THE FUNCTION NAME AND CURLY BRACES IN PLACE.
// PRESENTLY, IT IS SET TO DO NOTHING, BUT CAN BE CHANGED EASILY.
// TO CAUSE A REDIRECT TO ANOTHER PAGE, INSERT THE FOLLOWING LINE:
// window.location="http://redirect_page.html";
// JUST CHANGE THE ACTUAL URL OF COURSE :)

var action=function()
{
//alert("Recargar!");
javascript:location.reload();
//window.location=""
}

//*****************************************************//
//**********  DO NOT EDIT BEYOND THIS POINT  **********//
//*****************************************************//

var ns4=(document.layers)?true:false;
var ie4=(document.all)?true:false;
var blocksize=(barwidth-2)/waitTime/10;
var loaded=0;
var PBouter;
var PBdone;
var PBbckgnd;
var Pid=0;
var txt='';
txt+='Tiempo para la recarga: ';
if(ns4){
txt+='<table border=0 cellpadding=0 cellspacing=0><tr><td>';
txt+='<ilayer name="PBouter" visibility="hide" height="'+barheight+'" width="'+barwidth+'" onmouseup="hidebar()">';
txt+='<layer width="'+barwidth+'" height="'+barheight+'" bgcolor="'+bordercolor+'" top="0" left="0"></layer>';
txt+='<layer width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+unloadedcolor+'" top="1" left="1"></layer>';
txt+='<layer name="PBdone" width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+loadedcolor+'" top="1" left="1"></layer>';
txt+='</ilayer>';
txt+='</td></tr></table>';
}else{
txt+='<div id="PBouter" onmouseup="hidebar()" style="position:relative; visibility:hidden; background-color:'+bordercolor+'; width:'+barwidth+'px; height:'+barheight+'px;">';
txt+='<div style="position:absolute; top:1px; left:1px; width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px; background-color:'+unloadedcolor+'; font-size:1px;"></div>';
txt+='<div id="PBdone" style="position:absolute; top:1px; left:1px; width:0px; height:'+(barheight-2)+'px; background-color:'+loadedcolor+'; font-size:1px;"></div>';
txt+='</div>';
}

document.write(txt);

function incrCount(){
window.status="Loading...";
loaded++;
if(loaded<0)loaded=0;
if(loaded>=waitTime*10){
clearInterval(Pid);
loaded=waitTime*10;
setTimeout('hidebar()',100);
}
resizeEl(PBdone, 0, blocksize*loaded, barheight-2, 0);
}

function hidebar(){
clearInterval(Pid);
window.status='';
//if(ns4)PBouter.visibility="hide";
//else PBouter.style.visibility="hidden";
action();
}

//THIS FUNCTION BY MIKE HALL OF BRAINJAR.COM
function findlayer(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
layer=doc.layers[i];
if(layer.name==name)return layer;
if(layer.document.layers.length>0)
if((layer=findlayer(name,layer.document))!=null)
return layer;
}
return null;
}

function progressBarInit(){
PBouter=(ns4)?findlayer('PBouter',document):(ie4)?document.all['PBouter']:document.getElementById('PBouter');
PBdone=(ns4)?PBouter.document.layers['PBdone']:(ie4)?document.all['PBdone']:document.getElementById('PBdone');
resizeEl(PBdone,0,0,barheight-2,0);
if(ns4)PBouter.visibility="show";
else PBouter.style.visibility="visible";
Pid=setInterval('incrCount()',95);
}

function resizeEl(id,t,r,b,l){
if(ns4){
id.clip.left=l;
id.clip.top=t;
id.clip.right=r;
id.clip.bottom=b;
}else id.style.width=r+'px';
}

window.onload=progressBarInit;

y me funciona perfecto!! pero me gustaría alinearlo a la derecha de mi pantalla, es decir, que en vez de que salga alineado a la izquierda, pues que salga alineado a la derecha, independientemente de la resolución con que se vea la página. Lo he intentado, pero no logro alinearlo, si le pongo margin-left:760, si, se me pone a la derecha, peeeeeeeeero, no vale para todas las resoluciones, que me aconsejais, como puedo hacer para que se ponga a la derecha

Muchas gracias de antemano!!

[ceSharp]

hola susaninhax,
dos cosas:
- para que te aparezca alineado a la derecha puedes usar el atributo align="right" en el div que muestra el reloj y me imagino que en cualquier navegador aparecerá a la derecha (no lo he probado porque aquí solo tengo IE7)
-te paso un código de pocas lineas que también muestra un contador de segundos de 60 a 0

<script type="text/javascript">
document.write("<div id='elTiempo' align='right' ></div>");
setInterval(cuentaAtras,1000);
var contador = 60;
function cuentaAtras()
{
var cont = document.getElementById('elTiempo');
cont.innerHTML = contador;
if(contador == 0)
cont.style.display = 'none';
else
contador -= 1;
}
</script>

este, cuando llega a cero desaparece, pero puedes hacer cualquier otra cosa, justo cuando entra dentro del if(contador == 0)...

salu2

[susaninhax]

Muchas gracias CeSharp, el tuyo está muy bien, pero necesito que se valla mostrando con una barra.... y ese es perfecto pero no consigo alinearlo, estoy frustrada ya que son capas y estilos pero no tengo ni idea. Ya he probado el align pero nada...

Muchas gracias de todos modos

[ceSharp]

voy a ver el tuyo y a ver si puedo ayudarte....

[susaninhax]

Muchas gracias CeSharp me imagino que sera combinando algun estilo que sea compatible con posicion relativa PERRRRRRRo no tengo ni idea de como hacerlo, he probado a jugar con margin-left, margin.right, a crear una capa que contenga ese script pero na..

[ceSharp]

Ya estoy de vuelta!
mira, al final he montado yo uno muy similar al que tú querías:
<script type="text/javascript">
setInterval(crono,1000);
var contador = 0;
function crono()
{
var div_oscuro = document.getElementById('div_oscuro');
div_oscuro.style.width = contador;
if(contador == 180)
contador = 0;
else
contador +=3;
}
</script>

...y dentro del body:
<form id="form1" runat="server">
<div>
<div align="right">
<div id="div_oscuro" onclick="contador=0;" style="background-color: gray; position: absolute; height: 10px; width: 0px"></div>
<div id="div_gris" onclick="contador=0;" style=" background-color: ButtonShadow; height: 10px; width: 180px"></div></div>
</div>

... basicamente hace lo mismo pero este se puede poner a la derecha! :)

espero que te sirva, si no pero se acerca a tu idea dime que podríamos mejorar.

salu2
</form>

[susaninhax]

valla, está estupendo, en explorer se me queda a la derecha; en firefox se me queda uno a la derecha y lo que va aumentando en gris oscuro a la izquierda pero voy a intentar encajarlo,

Sabes como se podria hacer para que cuando llegase hasta 0 el contador se recargase la pagina y empezara de nuevo el conteo? meter un "javascript:location.reload();" ???

En serio, muchísimas gracias por tu ayuda, de verdad!!! no hay casi nada de informacion por la red sobre barras de este estilo para contadores y demás... , voy a ver si consigo que se quede en firefox puesto igual

[susaninhax]

Listo!! he conseguido que se vea en firefox tambien, MIL GRACIAS DE VERDAD!!!! QUE CONTENTA!!!

Ahora solo me falta ponerle el location.reload(); he intentado ponerlo pero me sale fallo de javascript

Imagino que hay que ponerlo dentro de este bucle:

if(contador == 180)

contador = 0;
location.reload();

else

No se como hacer para que cuando llegue a cero recargue la pagina y empiece de nuevo... como podría ponerle eso?

JO MUCHISIMAS GRACIAS!! en serio, te debo una

[susaninhax]

soy una pesada,

PERFECTO

Le falta poner las llaves...

if(contador == 180){
contador = 0;
location.reload();

}else{
contador +=3;
}

MILES DE GRACIAS EN SERIO!!!! en menos codigo y hace lo mismo, asi que perfecto

[ceSharp]

Eso es!
cuando después de un if solo hay una sentencia no hay que poner llaves, pero si hay mas de una si. Ahora lo tienes mas fácil para configurar colores, tamaño, etc. Lo único que tienes que tener en cuenta si quieres cambiar el tamaño es que cuadren 60 segundos con el tamaño de los divs, es decir, si quieres ponerlo a 240px el contador tendría que aumentar de cuatro en cuatro.

Me alegro de que te haya funcionado!!

salu2

[susaninhax]

eso estaba mirando, que no estaba segura si eran 6O seg lo que estasba tardando en rellenarse la barra XDD miles de gracias nuevamente