17 Oct Ejercicio – ¿Qué hora es? Programación de un reloj muy sencillo en JS
En este ejercicio vamos a aplicar de nuevo los métodos asociados al objeto fecha.
Será la primera vez en esta serie de ejercicios que usaremos el condicional if.
Te será de utilidad repasar el ejercicio 11 de generación de fechas personalizadas.
También esta entrada dónde se resumen los condicionales.
Enunciado
Escribe un script que escriba la hora exacta justo en el momento de cargar el documento web.
Solución del ejercicio
Para solucionar este ejercicio se ha prescindido del uso de una función. Habría sido recomendable.
Las horas, minutos y segundos se obtienen mediante getHours(), getMinutes() y getSeconds().
Cuando el valor que devuelven es menor a 10 los valores devueltos sólo tienen una cifra.
Para solucionarlo se escriben 3 simples condicionales que concatenan el string «0» justo delante del valor devuelto. De modo que en lugar de un número pasamos a tener un string.
Como resultado mediante document.write el reloj devuelve por pantalla una hora con el formato hh:mm:ss
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="Francesc Ricart">
<title>Ejercicio horas minutos y segundos</title>
</head>
<body>
<script>
var fecha = new Date();
var hora = fecha.getHours();
var minutos = fecha.getMinutes();
var segundos = fecha.getSeconds();
if (hora<10){hora = "0" + hora};
if (minutos<10){minutos = "0" + minutos};
if (segundos<10){segundos = "0" + segundos};
document.write("Son las " + hora + ":" + minutos + ":" + segundos )
</script>
</body>
</html>¡Hola!
Querido lector,
Mediante este ejercicio hemos creado un reloj que en un ejercicio futuro nos será muy útil para hacer una versión en la que la hora se actualizará a cada segundo. Lo haremos mediante setInterval().
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Entradas relacionadas:
Listado de palabras reservadas en Javascript de acuerdo con el último stándard ECMA Script 6.
Completo cronómetro JS dónde se usa setInterval, addEventListener, removeEventListener y se repasan conceptos de CSS. Incluye solución.
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
¿Estás cansado de buscar como solucionar el error concreto de tu script? La consola del navegador es tu ayuda. ¡Deja de buscar!
Ejercicio javascript dónde se muestra como generar contraseñas seguras de un modo bien fácil de cualquier longitud y letras. Incluye solución.
¿Estás estudiando javascript o otro lenguaje de programación? Las prisas nunca son buenas para ello. ¿Qué respondo a mis alumnos?
No hay comentarios