Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: pedro,, en 19 de Noviembre 2015, 23:30
-
Hola.
EJERCICIO 1
Crea un reloj JavaScript que marque los segundos usando el método setInterval.
<!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>
EJERCICIO 2
Crea un reloj JavaScript que marque los segundos usando el método requestAnimationFrame.
<!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>
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”.
<!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.
-
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
-
Hola Ogramar.
Me pasa exactamente lo que dices.
Lo solucioné sacando la linea
setInterval(function(){reloj()},1000);
fuera de la función reloj.
quedando así el código:
<!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.
-
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
-
Así queda mucho mejor explicado.
Gracias por la corrección.
Saludos.