Contador de tiempo que no se reinicie

verfutboldeprimera · #1 (**permalink**) 16/09/2011, 16:24

hola gente! nacesito un contador de minutos y segundos parecido a un contador de tablero de futbol.. he buscado en internet y los pocos que encontre se reinician, la idea es que siga contando por mas que se actualize la pagina. tambien encontre que hay que usar el contador del servidor o algo asi. jja yo uso como hosting 000webhost.com. si alguien sabe algo por favor respondan porque no hay mucho sobre este tema.. bueno desde ya gracias al que pueda colaborar.

Korreca · #2 (**permalink**) 16/09/2011, 17:56

Pasa una variable fija de tiempo desde la cual quieras empezar a contar y en vez de inicializar con cada carga de página el contador de tiempo a cero, hacerlo a la diferencia entre ahora y la fecha elejida.

Si das más datos como que lenguaje de servidor usas alguno te podremos ayudar mejor.

emprear · #3 (**permalink**) 16/09/2011, 18:11

Mirá este método

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cuenta Regresiva Múltiples Relojes</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content=
"Script Javascript. Cuenta regresiva a una fecha dada y acción al cumplirse el tiempo" />
<meta name="keywords" content="timer, cuenta regresiva, javascript, reloj, reloj múltiple" />
<meta name="author" content="Guillermo Gianello" />
<style type="text/css">
/*<![CDATA[*/
body{
background-color: #D7D7D7;
} 
div {
font-family: arial, sans-serif;
font-size: 10pt;
text-shadow: #6374AB 1px 1px 2px;
color: #000;
}
#reloj1{
margin-bottom: 3px;
color: #530000;
}
/*]]>*/
</style>
</head>
<body>
<!-- dónde querramos el reloj poner un div con un id por cada funcion IniciaCuenta que activemos -->
<div id="reloj1">[reloj1]</div>
<div id="reloj2">[reloj2]</div>
 
<!-- la script debe ser llamada antes del cierre del body -->
 
<script type="text/javascript">
//<![CDATA[
/* configuración */
// El formato del texto que se imprime en pantalla, las variable son 
// %%D%% para dias
// %%H%% para dias
// %%M%% para dias
// %%S%% para dias
var FormatoSalida = "<strong>Faltan<\/strong> <b>%%D%%<\/b> Dias <b>%%H%%<\/b> Horas <b>%%M%%<\/b> minutos <b>%%S%%<\/b> segundos para accionar el evento final";  
// El mensaje que se muestra al cunplir el tiempo (podría adaptarse para que sea una función)
var mensaje = "El tiempo expiró";
// iniciamos tantas funciones IniciaCuenta como divs con relojes tengamos
// se pasan los parametros id del div fecha (mes/dia/año AM/PM y tiempo UTC opcionalmente, 
// recordar que la script trabaja con el reloj del cliente
IniciaCuenta("reloj1","09/16/2012 8:05 PM UTC-0300");
IniciaCuenta("reloj2","11/16/2011 9:00 AM UTC-0300");
/* fin configuración */
function IniciaCuenta(divReloj,FechaDeDestino){
var destino = new Date(FechaDeDestino);
var ahora = new Date();
var diferencia  = new Date(destino-ahora);
var gsegs  = Math.floor(diferencia.valueOf()/1000);
ContarAtras(divReloj,gsegs);
}
function Calcular(segs, num1, num2){
var s = ((Math.floor(segs/num1))%num2).toString();
if (s.length < 2){ 
s = "0" + s;
}
return (s);
}
function ContarAtras(divReloj, segs){
var FormatoTiempo;
FormatoTiempo = FormatoSalida.replace(/%%D%%/g, Calcular(segs,86400,100000));
FormatoTiempo = FormatoTiempo.replace(/%%H%%/g,  Calcular(segs,3600,24));
FormatoTiempo = FormatoTiempo.replace(/%%M%%/g,  Calcular(segs,60,60));
FormatoTiempo = FormatoTiempo.replace(/%%S%%/g,  Calcular(segs,1,60));
if(segs > 0){ 
document.getElementById(divReloj).innerHTML = FormatoTiempo;
setTimeout("ContarAtras('" + divReloj + "'," + (segs-1) + ");", 990);
}else{
// aqui se muestra el mensaje, aunque como indiqué podría ser otra función 
document.getElementById(divReloj).innerHTML = mensaje;
}
}
//]]>
</script>
</body>
</html>

Demo
http://foros.emprear.com/jsdemo/time...regresiva.html

Saludos