0

Quiero hacer una página en la cual se te muestre la hora, pasa que al mostrarse la hora, no sale con un cero a la izquierda. Imagino que cambiando algún valor en el new Date() es posible, pero en el ejercicio se me pide que añada un cero a la izquierda a través de un If. He probado ya de todo, principalmente, cambiar el valor de las variables a través de condicionales, pero no me funciona. Quisiera que en el caso de que el valor fuera menor que 10, tanto en los segundos, como en los minutos, como en las horas, aparezca un cero a la izquierda. Os dejo aquí el código, muchas gracias.

<!DOCTYPE html>
<html lang="es">
<head

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ejercicio 402</title>

    <!--Aquí empieza JavaScript-->
    <script>
        //función para que nos de la hora
        function hora(){
            var areaHora = new Date();

            var horas = areaHora.getHours();

            var minutos = areaHora.getMinutes();

            var segundos = areaHora.getSeconds();

            caja = document.getElementById('tiempo');

            caja.innerHTML = horas+":"+minutos+":"+segundos;

            if (areaHora.getSeconds() < 10) {
                segundos = "0"+areaHora.getSeconds();
        }

        var cronometro = setInterval (hora, 1000);

    </script>
    <!--Aquí acaba JavaScript-->





    <style>
        div#texto {
            font-size: 20px;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            line-height: 40px;
        }
        div#tiempo {
            position: fixed;
            font-size: 60px;
            top: 25px;
            right: 50px;
            padding: 18px;
            border: 2px solid black;
            background-color:salmon;

        }
    </style>
</head>
<body>
    <div id="texto">

        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente odio sequi explicabo quo, labore architecto soluta quisquam nesciunt dolorum deserunt reprehenderit totam aspernatur eum, perferendis provident voluptatibus vero ut nobis!

    </div>
    <div id="tiempo">Time</div>
</body>
</html>
2
  • Y si colocas el if antes de caja.innerHTML, Tambien en el if no utilizes la variable areaHora para obtener nuevamente los segundo, mejor utiliza la variable segundos. Por cierto te falta cerra la llave del if
    – dlr
    Commented el 1 feb. 2020 a las 15:11
  • Muchas gracias, me has solucionado el problema, de verdad. Aún no entiendo bien el posicionamiento de las cosas, lo he puesto antes de caja.innerHTML y ahora funciona... Sigo sin entender bien como estructurar las cosas en JavaScript. Commented el 1 feb. 2020 a las 15:19

1 respuesta 1

0

Lo que pasa que estas cambiando el valor de la variable pero no la estas volviendo a pintar en tu html

     function hora(){
        var areaHora = new Date();

        var horas = areaHora.getHours();

        var minutos = areaHora.getMinutes();

        var segundos = areaHora.getSeconds();
        if (seconds < 10) seconds = "0" + segundos;

        caja = document.getElementById('tiempo');

        caja.innerHTML = horas+":"+minutos+":"+segundos;
    }

Con eso deberia funcionar :D!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.