Cuenta regresiva en segundos

[jpvilar]

No tengo conocimientos de javascript más que para customizar algún script pero estoy necesitando un script que me ponga en un iframe que toma variables externas una cuenta regresiva además que actualice esa página.

La idea era como los relojes que aparecen en los diarios con los resultados de los partidos que van diciendo "actualiza en N segundos" y vencidos estos hace el reload ¿me explico?

Estuve navegando y buscando pero los códigos que encontré son demasiado complejos para mi capacidad de customización ... jeje ... perdón.

Saludos y espero me den una manito ... gracias de antemano.

[jpvilar]

Encontré este ... cumplía otra función pero lo acomodé para que funcione como me interesaba.

Solamente quería saber ahora si hay manera de representar el número de segundos en texto y no en un input de formulario ... solo por la limpieza de código, quería que fuese más simple ...

Código:

<form name="redirect">
<form>
Actualiza en <input type="text" size="1" name="redirect2" class="INPUTInvisible">segundos.
</form>

  <script>
// segundos para refresh
var countdownfrom=60
var currentsecond=document.redirect.redirect2.value=countdownfrom+1
function countredirect(){
if (currentsecond!=1){
currentsecond-=1
document.redirect.redirect2.value=currentsecond
}
else{
document.location.reload()
return
}
setTimeout("countredirect()",1000)
}
countredirect()
</script>

[cmzbass]

Iniciado por jpvilar

Encontré este ... cumplía otra función pero lo acomodé para que funcione como me interesaba.

Solamente quería saber ahora si hay manera de representar el número de segundos en texto y no en un input de formulario ... solo por la limpieza de código, quería que fuese más simple ...

Código:

<form name="redirect">
<form>
Actualiza en <input type="text" size="1" name="redirect2" class="INPUTInvisible">segundos.
</form>

  <script>
// segundos para refresh
var countdownfrom=60
var currentsecond=document.redirect.redirect2.value=countdownfrom+1
function countredirect(){
if (currentsecond!=1){
currentsecond-=1
document.redirect.redirect2.value=currentsecond
}
else{
document.location.reload()
return
}
setTimeout("countredirect()",1000)
}
countredirect()
</script>

compadre, la respuesta es muy sencillal, coloca un div donde quieras q se vea la informacion.

ej.
<div id="segundos"></div>

y en la funcion donde entraga el valor pones esto :
document.getElementById('segundos').innerHTML = variable_cuenta_reagresiva;

con eso pondras el resultado de la funcion en el div.

saludos , espero t sirva.

[jpvilar]

Gracias cmzbass ... vamos a probarla ...

[nodosur]

como queda el codigo incluyendo el div para que salgan los segundos como texto ?

pudiste hacerlo funcionar ?.

[jpvilar]

Hola nodosur... al final usé un script que me bajé de Dinamic Drive... te lo copio a continuación... lo podés ver en funcionamiento en www.bairesdirecto.com.ar

Saludos y suerte

Código:

var loadedcolor='#CC0000' ;       // PROGRESS BAR COLOR
var unloadedcolor='#EEEEEE';     // COLOR OF UNLOADED AREA
var bordercolor='#003366';            // COLOR OF THE BORDER
var barheight=10;                  // HEIGHT OF PROGRESS BAR IN PIXELS
var barwidth=275;                  // WIDTH OF THE BAR IN PIXELS
var waitTime=180;                   // 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()
{
document.location.reload()
//window.location="http://www.dynamicdrive.com
}

//*****************************************************//
//**********  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='';
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;" title="Progeso para la actualización">';
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;