Hola a todos. Aquí dejo mis códigos para los ejercicios de la entrega CU01164E del tutorial de desarrollo web con JavaScript usando Notepad++ como editor. No sé exactamente si es lo que se pide según el lugar donde deban incluirse las funciones timers.
Gracias. Un saludo.
Ejercicio 1:
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<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;
}
function actualizarHora(i) {
if (i<10) {i = "0" + i}; // Añadir el cero en números menores de 10
return i;
}
window.onload=function(){
setInterval(reloj,1000);
}
</script>
</head>
<body>
<script type="text/javascript">
</script>
<div style="text-align:center;">
<div style="color:blue; font-family: verdana, arial; font-size:30px; padding:15px;" id ="displayReloj" ></div>
</div>
</body>
</html>
Ejercicio 2:
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script type="text/javascript">
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.oRequestAnimationFrame;
var globalID;
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;
globalID=requestAnimationFrame(reloj);
}
function actualizarHora(i) {
if (i<10) {i = "0" + i}; // Añadir el cero en números menores de 10
return i;
}
window.onload=function(){
globalID=requestAnimationFrame(reloj);
}
</script>
</head>
<body>
<script type="text/javascript">
</script>
<div style="text-align:center;">
<div style="color:blue; font-family: verdana, arial; font-size:30px; padding:15px;" id ="displayReloj" > </div>
</div>
</body>
</html>
Ejercicio 3:
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script type="text/javascript">
var crono;
var i=60;
function cronometro(){
nodoDiv=document.getElementById('displayReloj');
nodoDiv.innerHTML='00:'+i;
i--;
i=actualizarHora(i);
nodoDiv.innerHTML='00:'+i;
if(i==0){
finish();
}
}
function actualizarHora(i) {
if (i<10) {
i = "0" + i;
}
return i;
}
function start(){
crono=setInterval(cronometro,1000);
//crono=setInterval(function(){cronometro},1000);
}
function finish(){
alert('Tu tiempo ha terminado');
clearInterval(crono);
i=60;
reset();
}
function reset(){
document.getElementById('displayReloj').innerHTML='01:00';
}
window.onload=function(){
cronometro();
}
</script>
</head>
<body>
<script type="text/javascript">
</script>
<button id="inicio" onclick="start()">PLAY</button>
<div style="color:blue; font-family: verdana, arial; font-size:30px; padding:15px;" id ="displayReloj"></div>
</body>
</html>
Tema: Javascript cronómetro de cuenta atrás Funciones Timers setInterval CU01164E (Leído 2289 veces)
RSS -
WAP2