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: 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.
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”.
<!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.
>:(
-
Buenas, todo correcto, buen código.
Salu2