Foros del Web - Ver Mensaje Individual

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