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: bermartinv en 25 de Febrero 2016, 22:10
-
EJERCICIO 1
Crea un reloj JavaScript que marque los segundos usando el método setInterval.
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
var llamada = setInterval (reloj,500);
}
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 >
<div style="text-align:center;">
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos 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>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
var globalID;
function empecemos(){
var empezar = requestAnimationFrame(reloj);
}
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;
}
</script>
</head>
<body onload="empecemos()" >
<div style="text-align:center;">
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos 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”.
Para este ejercicio, me hice un poco de lio porque no sabía cómo hacerlo. Después de termiarlo miré cómo lo habían hecho otros compañeros y la forma que lo había heho Pedro, no hubiese caido nunca de hacerlo por ahí, pero parece más sencilla.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
}
#ventana{
margin:auto;
display:block;
position:absolute;
height:200px;
width:400px;
background: pink;
border:solid 1px black;
}
#reloj{
position: absolute;
top:40px;
left:120px;
font-size: 80px;
color:dodgerblue;
text-align: center;
}
</style>
<script>
var segundos = 0;
var minutos = 1;
var llamada;
var ceromin='';
var ceroseg='';
function cuentaAtras(){
devolvercero(minutos,segundos);
segundos = segundos % 60;
document.getElementById("reloj").innerHTML=ceromin+minutos+':'+ceroseg+segundos;
if (minutos ===0 && segundos ===0){
alert ("Se agotó su tiempo");
clearTimeOut(llamada);
}
if (segundos ==0){
minutos --;
segundos+=60;
}
segundos --;
var llamada = setTimeout(cuentaAtras,1000);
}
function devolvercero(minutos,segundos){
if (minutos<10){
ceromin='0';
}
if (segundos<10){
ceroseg='0';
}else {
ceroseg='';
}
return ceroseg;return ceromin;
}
</script>
</head>
<body onload="cuentaAtras()">
<div id="ventana">
<div id="reloj">
</div>
</div>
</body>
</html>
Saludos
-
Buenas.
Los tres ejercicios bien.
En el ejercicio 3, yo utilicé Date para realizar el ejercicio, pero habría muchas formas de resolver este ejercicio dependiendo el uso para el que se quiera. Aquí te dejo otra forma de resolverlo.
<!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 segundos = 60;
function reloj() {
if(segundos==60){
document.getElementById('displayReloj').innerHTML = '01:00';
}else if(segundos>9){
document.getElementById('displayReloj').innerHTML = '00:' + segundos;
}else{
document.getElementById('displayReloj').innerHTML = '00:' + '0' + segundos;
}
if(segundos==0){
alert('Tu tiempo ha terminado');
}else{
var t = setTimeout(function(){reloj()},1000);
}
segundos--;
}
</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.
-
El hecho de hacerlo así fue para que se pudiera variar también la cantidad de minutos.
Gracias pedro, por tu aporte. ;)