Autor Tema: JavaScript crear un reloj cronómetro de cuenta atrás descendente CU01164E# (Leído 5807 veces)

Dimitar Stefanov · « **en:** 26 de Marzo 2016, 20:52 »

Buenas noches. Cuelgo las posibles soluciones de los ejercicios de la entrega CU01164E del curso JavaScript desde cero.

Primer ejercicio:

Citar

EJERCICIO 1

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

El código:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Ejemplo aprenderaprogramar.com</title>
	<style type="text/css">
	div{
		text-align: center; 
		font-size: 50px; 
		margin-top: 100px;
	}
	</style>
	<script type="text/javascript">

		window.onload = function(){
			setInterval(function(){reloj()},500);
		}

		function reloj(){
			var div = document.getElementsByTagName('div');
			var date = new Date();
			var hora = date.getHours();
			var minutos = date.getMinutes();
			minutos = anyadir0(minutos);
			var segundos = date.getSeconds();
			segundos = anyadir0(segundos);
			div[0].innerHTML = 'La hora es: '+hora+':'+minutos+':'+segundos;
		}

		function anyadir0(t){
			if(t<10){
				t = '0'+t;
			}
				return t;
		}
		
	</script>
</head>
<body>
	<div></div>
</body>
</html>

El segundo ejercicio:

Citar

EJERCICIO 2

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

El código:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Ejemplo aprenderaprogramar.com</title>
	<script type="text/javascript">

		function reloj(){
			globalID = requestAnimationFrame(mostrarReloj);
		}

		function mostrarReloj(){
			var div = document.getElementsByTagName('div');
			var date = new Date();
			var hora = date.getHours();
			var minutos = date.getMinutes();
			minutos = anyadir0(minutos);
			var segundos = date.getSeconds();
			segundos = anyadir0(segundos);
			div[0].textContent = "La hora es:"+hora+":"+minutos+":"+segundos;
			globalID = requestAnimationFrame(mostrarReloj);
		}

		function anyadir0(t){
			if(t<10){
				t = '0'+t;
			}
			return t;
		}

	</script>
</head>
<body onload="reloj()">
	<div style="text-align: center; font-size: 60px; padding-top: 100px;"></div>
</body>
</html>

Y el tercer ejercicio:

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”.

El código:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Ejemplo aprenderaprogramar.com</title>
	<style type="text/css">
	div{
		text-align: center;
		font-size: 60px;
		margin-top: 100px;
	}
	</style>
	<script type="text/javascript">

		var i=59;
		var restar = setInterval(restar,1000);
		var cambiar01 = setTimeout(cambiar01,1000);
		var msn = setTimeout(msn,62000);

		function cambiar01(){
			document.getElementById('01').innerHTML = '00:';
		}

		function restar(){
			document.getElementById('02').textContent = i;
			i--;
			if(i<0){
				clearInterval(restar);
			}else if(i<10){
				i = '0'+i;
			}
		}

		function msn(){
			document.getElementById('principal').innerHTML = 'La cuenta atrás ha finalizado!!!';
		}

	</script>
</head>
<body>
	<div><span>Cuenta atrás:</span>
		<div id="principal"><span id="01">01:</span><span id="02">00</span></div>
	</div>
</body>
</html>

Gracias.

César Krall · « **Respuesta #1 en:** 29 de Marzo 2016, 15:55 »

Hola!

Todo muy bien! La única recomendación que te hago es que siempre intentes poner nombres descriptivos de variables y funciones, por ejemplo msn no es descriptivo porque no se sabe muy bien lo que significa si no estudias el código

Saludos!

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: JavaScript crear un reloj cronómetro de cuenta atrás descendente CU01164E# (Leído 5807 veces)

Dimitar Stefanov

JavaScript crear un reloj cronómetro de cuenta atrás descendente CU01164E#

César Krall

Re:JavaScript crear un reloj cronómetro de cuenta atrás descendente CU01164E#

Preguntas y respuestas

Foros aprenderaprogramar.com Didáctica y divulgación de la programación

Noticias:

Autor Tema: JavaScript crear un reloj cronómetro de cuenta atrás descendente CU01164E# (Leído 5807 veces)

Dimitar Stefanov

JavaScript crear un reloj cronómetro de cuenta atrás descendente CU01164E#

César Krall

Re:JavaScript crear un reloj cronómetro de cuenta atrás descendente CU01164E#

Preguntas y respuestas

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación