contador regresivo con Prototype

chalchis · #1 (**permalink**) 03/06/2008, 14:25

http://zetallite.com/tech-stuff/2008...untdown-clock/

hola amigos encontre este script para usar un Countdown Clock
funciona muy bien el unico detalle es que el script se sigue ejecutanto ya cuando el tiempo
llego a su meta o fin que se le alla especificado

mi pregunta como puedo deterner el script para que ya no haga peticiones al server

este es el codigo

Código:

<?php

header("Expires: 0"); 
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); 
header("cache-control: no-store, no-cache, must-revalidate"); 
header("Pragma: no-cache");

// mktime(hour, minute, second, month, day, year)
$target_date = mktime(0, 0, 0, 1, 1, 2009);

$today_date = time();
$secs_left = $target_date - $today_date; 

if ($secs_left > 0) //not yet reach target date
{ 

//1 day is 86400 seconds (60 * 60 * 24)
$days_left = floor($secs_left / 86400); 
//1 hour is 3600 seconds (60 * 60)
$hrs_left = floor(($secs_left - $days_left * 86400) / 3600);
//1 minute is 60 seconds (duh…)
$mins_left = floor(($secs_left - ($days_left * 86400) - ($hrs_left * 3600)) / 60); 

$secs_left = $secs_left - ($days_left * 86400) - ($hrs_left * 3600) - ($mins_left * 60);

echo “<strong>”.$days_left.”</strong> day : “.
“<strong>”.$hrs_left.”</strong> hr : “.
“<strong>”.$mins_left.”</strong> min : “.
“<strong>”.$secs_left.”</strong> sec”;
}

else //target date reached!
{ 
echo “2009 has arrived!”; //do something here…
}

?>

aqui se invoca el script

Código:

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"> 
new Ajax.PeriodicalUpdater ( "countdown", "countdown.php", { method: "get", frequency: 1 } );
</script>

espero sus comentarios
saludos

GatorV · #2 (**permalink**) 03/06/2008, 15:23

Hola chalchis,

Si buscas en el manual de Prototype, te podrás dar cuenta que la clase PeriodicalUpdater tiene un método stop.

Saludos.

Tema trasladado a Frameworks.

chalchis · #3 (**permalink**) 03/06/2008, 22:16

hola GatorV si ya lo probe y funciona pero el problema es que deseo que php realize el stop
es decir en lugar de

Código:

else //target date reached!
{ 
echo “2009 has arrived!”; //do something here…
}

puse algo asi

Código:

else //target date reached!
{
   echo '<script type="text/javascript">';
   echo 'detener():';
   echo '</script>';

}

y en donde se invoca el script

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Countdown Clock</title>
</head>
<body>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
var parar = new Ajax.PeriodicalUpdater ( "countdown", "countdown.php", { method: "get", frequency: 1 } );

function detener()
{
  parar.stop();
}
</script>
<div id="countdown"></div>
</body>
</html>

el detalle es que se imprime en patalla detener();
que debo hacer para que se interprete
como codigo de javascript en el php cuando termine
timer

saludos
espero sus comentarios

chalchis · #4 (**permalink**) 03/06/2008, 23:36

bueno creo que mi error era que no estaba poniendo las etiquetas de <script>
ahora ya corregido cuando el time llego a su fin

Código:

echo date("H:i:s")."<br>";
echo '<script language="javascript">';
echo 'detener();';
echo '</script>';

aqui lo que traté de que invoque la funcion detener
para que ya no siga haciendo petiticiones el PeriodicalUpdater
pero pues siemplemente no hace caso al script y sigue haciendo
peticiones

GatorV · #5 (**permalink**) 04/06/2008, 09:28

Hola chachis,

Revisa en el foro de AJAX en las FAQs, hay un howto de MaboraK que explica como ejecutar código Javascript que viene de AJAX, necesitas usarlo para poder ejecutar el método stop() desde AJAX.

Saludos.

chalchis · #6 (**permalink**) 04/06/2008, 15:09

gracias GatorV lo estoy checando

saludos

chalchis · #7 (**permalink**) 04/06/2008, 15:43

hola amigos parece que he encontrado la solución

en el archivo de invocación
agregue dentro de las opciones del Ajax.PeriodicalUpdater
evalScripts:true

evalScripts ( true | false ) - Ejecutar los <script> recibidos en la petición. (vienen en el archivo prototype.js Version: '1.6.0.2',)

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Countdown Clock</title>
</head>
<body>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
 var foo = new Ajax.PeriodicalUpdater ( "countdown", "countdown.php", { method: "get", frequency: 1, evalScripts:true } );  
 function ver()
 {
  foo.stop();
 }
</script>
<div id="countdown"></div>
</body>
</html>

en el php

Código:

<?php
header("Expires: 0");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("cache-control: no-store, no-cache, must-revalidate");
header("Pragma: no-cache");

$target_date = mktime(16, 30, 40, 06, 04, 2008);
$today_date = time();
$secs_left = $target_date - $today_date;

$hrser = date("H:i:s");
if ($secs_left > 0) //not yet reach target date
{

//1 day is 86400 seconds (60 * 60 * 24)
$days_left = floor($secs_left / 86400);
//1 hour is 3600 seconds (60 * 60)
$hrs_left = floor(($secs_left - $days_left * 86400) / 3600);
//1 minute is 60 seconds (duh…)
$mins_left = floor(($secs_left - ($days_left * 86400) - ($hrs_left * 3600)) / 60);

$secs_left = $secs_left - ($days_left * 86400) - ($hrs_left * 3600) - ($mins_left * 60);

echo "fecha meta:16:30:40<br>hora actual:$hrser<br><strong>".$days_left."</strong> day : ".
"<strong>".$hrs_left."</strong> hr : ".
"<strong>".$mins_left."</strong> min : ".
"<strong>".$secs_left."</strong> sec";
}

else //target date reached!
{	
	echo "tiempo finalizado ".$hrser; //do something here…
	echo "<script type='text/javascript'>";
	echo 'ver();';	
	echo "</script>";	
}

?>

tambien lo probe asi, imprimiendo desde php
la función

Código:

<?php

else //target date reached!
{	
	echo "tiempo finalizado ".$hrser; //do something here…
	echo "<script type='text/javascript'>";	
	echo 'foo.stop();';
	echo "</script>";	
}

?>

espero sus comentarios
amigos y muchas gracias por la ayuda (GatorV)

saludos

GatorV · #8 (**permalink**) 04/06/2008, 15:44

Se me había olvidado el parámetro evalScripts de prototype, pero ya lo tengo en mente.

Me da gusto que hayas logrado solucionar tu problema.

Saludos.

shekmet · #9 (**permalink**) 16/11/2008, 14:49

Hola gente, estoy tratando de usar este script pero tengo un problema, quiero que al oprimir un boton se agregue tiempo al contador. Si alguien puede ayudarme se los agradeceré.
Saludos.