Autor Tema: código ejemplo reloj javascript setTimeOut setInterval clearTimeOut CU01164E (Leído 2083 veces)

paramonso · « **en:** 17 de Febrero 2018, 11:27 »

Hola. Hago la entrega del ejercicio: CU01164E ejemplo reloj javascript setTimeOut setInterval clearTimeOut, del curso programación web básica de aprenderaprogramar.

Citar

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

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

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 detenerse y mostrar el mensaje: “Tu tiempo ha terminado”.

Código: [Seleccionar]

<!DOCTYPE html>

<html>
	<head>
		<title>Ejemplo aprenderaprogramar.com</title>
		<meta charset="utf-8">

<script type="text/javascript">
window.requestAnimationFrame = window.requestAnimationFrame || 
							   window.mozRequestAnimationFrame ||
							   window.webkitRequestAnimationFrame ||
							   window.oRequestAnimationFrame;

 var globalID;
 var i=60;	
 var inicioCronometro;
 
//EJERCICIO 1
 function ejer1()
		{	
			cancelAnimationFrame(globalID);
			clearInterval(inicioCronometro);
			horas.style.backgroundColor="Khaki";
			minutos.style.backgroundColor="Khaki";
			segundos.style.backgroundColor="Khaki";
			mensaje=document.getElementById('mensaje');
			mensaje.style.color="orange";
			mensaje.innerHTML="Ejercicio 1";
			reloj()
		}
function reloj() 
	{ 
		 data()
		 var t = setInterval(function(){reloj()},500);
		  
	}
// ***** FIN  EJERCICIO 1

//EJERCICIO 2
		function ejer2()
		{
			clearInterval(reloj);
			clearInterval(inicioCronometro);
			horas.style.backgroundColor="DarkKhaki";
			minutos.style.backgroundColor="DarkKhaki";
			segundos.style.backgroundColor="DarkKhaki";
			mensaje=document.getElementById('mensaje');
			mensaje.style.color="yellow";
			mensaje.innerHTML="Ejercicio 2";
			reloj2()
		}
		

function reloj2()
		{
			
		data()
		globalID = requestAnimationFrame(reloj2);
		 
		}
// ***** FIN  EJERCICIO 2

//EJERCICIO 3
function inicio()
		{  
		  inicioCronometro=setInterval(cronometro,1000);	
		}
		
function cronometro()
{
i--
	mensaje=document.getElementById('mensaje');
	mensaje.style.color="black";
	mensaje.innerHTML="Cronometro";
	document.getElementById('horas');
	document.getElementById('minutos');
	document.getElementById('segundos');
	
	horas.innerHTML="00";
		if (i<60)
		{
			minutos.innerHTML="00";
		}
		
		if(i==0){resetCronometro()	}
	i = actualizarHora(i);
	segundos.innerHTML= i;
		  
}

 function  resetCronometro()
	{
	clearInterval(inicioCronometro);
	mensaje.innerHTML="Tu tiempo ha terminado";
 	horas.innerHTML="00";
	minutos.innerHTML="00";
	segundos.innerHTML="00";
		
	}
// ***** FIN  EJERCICIO 3
//**************************************
//Datos para los tres ejercicios
function data()
	{
		var hoy=new Date(); 
		var h=hoy.getHours(); 
		var m=hoy.getMinutes(); 
		var s=hoy.getSeconds();
		h = actualizarHora(h);
		m = actualizarHora(m);    
		s = actualizarHora(s);
		
		horas=document.getElementById('horas')
		minutos=document.getElementById('minutos')
		segundos=document.getElementById('segundos')
		
		horas.innerHTML = h;
		minutos.innerHTML = m;
		segundos.innerHTML = s;
	}
// Actualizar hora para los tres ejercicios
function actualizarHora(i)
	{
	    if (i<10) {i = "0" + i};  // Añadir el cero en números menores de 10
     
    return i;
	}
//******************** FIN TEMA *******************//
</script>



<style type="text/css">
body{background-color:yellow;}
#cabecera{text-align:center;}
	
	.dial,#mensaje{
		  font-weight: bold;
		  font-size: 58px;
		  font-family: "Arial";
		text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
		color: Gold;
		margin-left:40%;
	}
	#horas, #minutos, #segundos
		{	
		 box-shadow: 3px 3px 8px black;
		background-color:Khaki;
		
		border:outset 2px;
		float:left;
		margin-left:2px;
		padding:2px;
		margin-bottom:55px;
		}
	
	#puntos1, #puntos2
	{
		color:orange;
		float:left;
		margin-left:4px;
		animation: blink-animation 1s steps(5, start) infinite;
		-webkit-animation: blink-animation 1s steps(5, start) infinite;
				}
	#mensaje{clear:both;}
.boton 
			{
			clear:both;
			border:outset grey  2px;  
			width:150px;
			height:25px;
			border-radius:25px 25px;
			box-shadow:3px 3px 2px 2px #AFF6AF;
			text-align:center;
    		background-color:#90EE90;
			 
			font-size:19px;
			margin-top :2px;
			 
			margin-bottom:5px;
			float:left;
				} 
			.boton{margin-left:45%;}
			 
			 
.boton:hover {
					border:inset 2px green;
					box-shadow:3px 3px 2px 2px  #0BF50B ;
					color:white;
					
			   		 }
	 
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
</style>
</head>
<body onload="inicio()">
<div id="cabecera">
	<h1>Cursos aprenderaprogramar.com</h1>
	<h2>Ejemplos JavaScript</h2>
	<h3>Esperar un segundo para incicio de cronometro</h3>
	</div >
	<div class="dial">
		<div id ="horas" > 00 </div>
		<div id="puntos1"> :</div>
		<div id ="minutos" > 01 </div>
		<div id="puntos2"> :</div>
		<div id ="segundos" > 00 </div>
	</div>
<div class="boton" onclick="ejer1()">Ejercicio1</div> 
<div class="boton" onclick="ejer2()">Ejercicio2</div> 
 
<div  id="mensaje"></div>
 
</body>
</html>

Adios.

Ogramar · « **Respuesta #1 en:** 17 de Junio 2018, 17:23 »

Buenas, todo correcto, buen código.

Salu2

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

Noticias:

Autor Tema: código ejemplo reloj javascript setTimeOut setInterval clearTimeOut CU01164E (Leído 2083 veces)

paramonso

código ejemplo reloj javascript setTimeOut setInterval clearTimeOut CU01164E

Ogramar

Re:código ejemplo reloj javascript setTimeOut setInterval clearTimeOut CU01164E

Preguntas y respuestas

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

Noticias:

Autor Tema: código ejemplo reloj javascript setTimeOut setInterval clearTimeOut CU01164E (Leído 2083 veces)

paramonso

código ejemplo reloj javascript setTimeOut setInterval clearTimeOut CU01164E

Ogramar

Re:código ejemplo reloj javascript setTimeOut setInterval clearTimeOut CU01164E

Preguntas y respuestas

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