Autor Tema: Ejemplo reloj JavaScript y cronómetro de cuenta atrás. Ejercicio CU01164E.  (Leído 5720 veces)

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Hola.

Citar
EJERCICIO 1
Crea un reloj JavaScript que marque los segundos usando el método setInterval.

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function reloj() {
var hoy=new Date(); var h=hoy.getHours(); var m=hoy.getMinutes(); var s=hoy.getSeconds();
m = actualizarHora(m);    s = actualizarHora(s);
document.getElementById('displayReloj').innerHTML = h+":"+m+":"+s;
var t = setInterval(function(){reloj()},1000);
}
function actualizarHora(i) {
if (i<10) {i = "0" + i};  // Añadir el cero en números menores de 10
return i;
}
</script>
</head>
<body onload="reloj()" >
<div style="text-align:center;">
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Reloj JavaScript</h3></div>
<div style="color:blue; font-family: verdana, arial; font-size:30px; padding:15px;" id ="displayReloj" >   </div>
</div>
</body>
</html>

Citar
EJERCICIO 2
Crea un reloj JavaScript que marque los segundos usando el método requestAnimationFrame.

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function reloj() {
var hoy=new Date(); var h=hoy.getHours(); var m=hoy.getMinutes(); var s=hoy.getSeconds();
m = actualizarHora(m);    s = actualizarHora(s);
document.getElementById('displayReloj').innerHTML = h+":"+m+":"+s;
var t = requestAnimationFrame(reloj);
}
function actualizarHora(i) {
if (i<10) {i = "0" + i};  // Añadir el cero en números menores de 10
return i;
}
</script>
</head>
<body onload="reloj()" >
<div style="text-align:center;">
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Reloj JavaScript</h3></div>
<div style="color:blue; font-family: verdana, arial; font-size:30px; padding:15px;" id ="displayReloj" >   </div>
</div>
</body>
</html>

Citar
EJERCICIO 3
Crea un reloj JavaScript que marque inicialmente 01:00 (es decir, 1 minuto) y que marche hacia atrás (00:59, 00:58, 00:57 … etc.) hasta llegar a 00:00. Cuando llegue a 00:00 debe deternerse y mostrar el mensaje: “Tu tiempo ha terminado”.

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
var milisegundos = 60000;
function reloj() {
if(milisegundos>-1000){
var fecha=new Date(milisegundos);
var m=fecha.getMinutes();
var s=fecha.getSeconds();
m = actualizarHora(m);
s = actualizarHora(s);
document.getElementById('displayReloj').innerHTML = m+":"+s;
milisegundos = milisegundos - 1000;
var t = setTimeout(function(){reloj()},1000);
}else{
alert('Tu tiempo ha terminado');
}
}
function actualizarHora(i) {
if (i<10) {i = "0" + i};  // Añadir el cero en números menores de 10
return i;
}
</script>
</head>
<body onload="reloj()" >
<div style="text-align:center;">
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Cuenta atrás</h3></div>
<div style="color:blue; font-family: verdana, arial; font-size:30px; padding:15px;" id ="displayReloj" >   </div>
</div>
</body>
</html>

Saludos.
« Última modificación: 22 de Noviembre 2015, 11:55 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2635
    • Ver Perfil
Re:Ejemplo reloj JavaScript y cronómetro de cuenta atrás. Ejercicio CU01164E.
« Respuesta #1 en: 22 de Noviembre 2015, 11:55 »
Buenas cuando ejecuto el ejercicio 1 y pasa un poco de tiempo se me detiene y me muestra "Un script es esta página puede estar ocupado o puede que haya dejado de responder..." en un navegado, en otro navegador tras pasado un tiempo empieza a ir más lento y ya no refresca bien ¿A ti te ocurre eso?

Salu2

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Ejemplo reloj JavaScript y cronómetro de cuenta atrás. Ejercicio CU01164E.
« Respuesta #2 en: 22 de Noviembre 2015, 13:04 »
Hola Ogramar.

Me pasa exactamente lo que dices.

Lo solucioné sacando la linea
Citar
setInterval(function(){reloj()},1000);
fuera de la función reloj.

quedando así el código:

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function empezar(){
setInterval(function(){reloj()},1000);
}
function reloj() {
var hoy=new Date(); var h=hoy.getHours(); var m=hoy.getMinutes(); var s=hoy.getSeconds();
m = actualizarHora(m);    s = actualizarHora(s);
document.getElementById('displayReloj').innerHTML = h+":"+m+":"+s;
}
function actualizarHora(i) {
if (i<10) {i = "0" + i};  // Añadir el cero en números menores de 10
return i;
}
</script>
</head>
<body onload="empezar()" >
<div style="text-align:center;">
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Reloj JavaScript</h3></div>
<div style="color:blue; font-family: verdana, arial; font-size:30px; padding:15px;" id ="displayReloj" >   </div>
</div>
</body>
</html>

Pero en realidad no entiendo el porqué de esta forma sí funciona y de la otra no.

Edito...

Después de pensarlo, creo que sí lo entiendo.

Si setInterval esta dentro de la función, lo que hace el código es que va sumando ejecuciones de la función. Es decir, si digo que se ejecute la función reloj con un intervalo de 1 segundo,  cada vez que entre en la función reloj, le estoy volviendo a decir lo mismo, con lo cual la segunda vez que entramos en la función reloj y se ejecuta la linea del setInterval, cuando se ejecuta la función reloj, se ejecutará dos veces, y así sucesivamente, llegando un momento que llegamos al bloqueo de la página.
« Última modificación: 22 de Noviembre 2015, 17:15 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2635
    • Ver Perfil
Re:Ejemplo reloj JavaScript y cronómetro de cuenta atrás. Ejercicio CU01164E.
« Respuesta #3 en: 22 de Noviembre 2015, 17:16 »
Sí, ahora va bien! El primer diseño (erróneo) tenía el problema de que establecía que la función reloj debía de ejecutarse cada segundo, y al ser llamada volvía a establecer una ejecución cada segundo, con lo cual teníamos dos ejecuciones, en la tercera ejecución se iban sumando programaciones de ejecuciones hasta que se producía el bloqueo debido a la gran cantidad de programaciones concurrentes.

Con el nuevo diseño programas la ejecución de la función cada segundo, y con cada ejecución se actualiza el segundo mostrado pero no tienen lugar nuevas reprogramaciones de ejecución, de esta manera se ejecuta perfectamente.

El segundo ejercicio con el requestAnimationFrame está bien y el tercero también va perfecto

Salu2

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Ejemplo reloj JavaScript y cronómetro de cuenta atrás. Ejercicio CU01164E.
« Respuesta #4 en: 22 de Noviembre 2015, 17:18 »
Así queda mucho mejor explicado.

Gracias por la corrección.

Saludos.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".