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: 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:
EJERCICIO 1
Crea un reloj JavaScript que marque los segundos usando el método setInterval.
El código:
<!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:
EJERCICIO 2
Crea un reloj JavaScript que marque los segundos usando el método requestAnimationFrame.
El código:
<!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:
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:
<!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.
-
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!