Ejercicio – ¿Qué hora es? Programación de un reloj muy sencillo en JS

Ejercicio – ¿Qué hora es? Programación de un reloj muy sencillo en JS

Print Friendly, PDF & Email
Ejercicio – ¿Qué hora es? Programación de un reloj muy sencillo en JS
Valora esta entrada
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.

hora personalizada
Ver solución (Haz clic)

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:

Javascript: Acoplamiento
- 682
En entradas anteriores hemos visto el origen de javascript como una de las aportaciones de Netscape a la web y como un lenguaje muy útil para aprender a programar. Este lenguaje de script nos permite ...
Ejercicio JS – Formulario con un campo oculto
- 113
Ejercicio javascript con un campo que se muestra cuando se selecciona un asunto determinado mediante un select. Incluy resolución.
Ejercicio – Corregir errores de sintaxis en funciones
- 164
Ejercicio javascript dónde se repasa la sintaxi de funciones. Corrige los errores.
Ejercicio – Diferencia entre ++x y x++ en Javascript
- 136
En esta publicación se repasa mediante ejercicios la diferencia entre escribir ++x y x++ o --x y x--. Es cuestión de pillarle el tranquillo.
Eliminar el comportamiento por defecto de todos los enlaces de una web
- 77
Ejercicio javascript dónde se inhabilitan todos los enlaces al cargar una web. Al hacer click en un botón se activan de nuevo. Incluye solución.
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 363
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Validación de formularios web: Como desactivar el envío con Javascript
- 662
Veamos como podemos deshabitar el envío de un formulario web mediante javascript. Explico el método clásico y otra alternativa más limpia mediante preventDefault().
Ejercicio JS – Crear un cronómetro con javascript
- 330
Completo cronómetro JS dónde se usa setInterval, addEventListener, removeEventListener y se repasan conceptos de CSS. Incluye solución.
Ejercicio – Generación de una fecha personalizada mediante javascript
- 136
Ejercicio javascript dónde se trabaja con fechas y los métodos para fechas con el objetivo de crear fechas con formato personalizado.
Ejercicio – corrección de errores en javascript. Variables y strings.
- 155
En este ejercicio practicamos la diferencia entre usar un string y una variable. También otras normas básicas de sintaxis de javascript.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.