Tutorial Como hacer un Reloj con HTML, CSS y Javascript



En este tutorial aprenderás como hacer un increíble reloj de 12 horas con html, css y javascript.

🚀 Blog de diseño web:
https://www.falconmasters.com

✔️ Curso Completo de Diseño Web Profesional:
https://www.udemy.com/course/diseno-web/?referralCode=BCC54890816B6A9BCFB7

✔️ Curso Completo de PHP7 y MYSQL:
https://www.udemy.com/course/php-y-mysql/?referralCode=65030D8167A2AC468B3A

✔️ Curso de Bootstrap 4:
https://www.udemy.com/course/curso-bootstrap/?referralCode=9295F0DABEA90E98FF64

✔️ Curso de Ecommerce:
https://www.udemy.com/course/curso-tienda-online/?referralCode=18423E7B622E6C6C2846

♦ Curso de HTML desde 0:

♦ Curso de CSS desde 0:

♦ Curso de Javascript desde 0:


Redes Sociales:

♦ Twitter @falconmasters:

♦ Pagina de Facebook:
http://www.facebook.com/falconmasters

source

You May Also Like

About the Author: admin

49 Comments

  1. Gracias bro, me sirvio, al principio tuve un contratiempo con el script pero despues de un tiempo revisando cual pudo ser el error, examine en la consola y era algo pequeño una de las variables no encontraba su id porque el nombre era diferente por una e. Me ha servido para aprender

  2. hola solo tengo un pequeño problema el resto del codigo funciona pero a la hora de crear PHoras me tira el siguiente error, repito , el resto del codigo HTML , CSS y JS todo bien , solo ese problema en la linea 14 del codigo JS .

    Uncaught SyntaxError: Unexpected token var – 14

    si alguien podria ayudarme , gracias.

  3. HOLA QUE TAL, TENGO ESTE CÓDIGO EN JS, EL DETALLE ES QUE CUANDO ME SALGO DE LA PÁGINA O LO REFRESCO SE ACTUALIZA DESDE EL INICIO, ¿QUÉ DEBO DE CAMBIAR, ELIMINAR, ETC, PARA QUE POR MÁS QUE ME SALGA DE LA VENTANA NO VUELVA AL INICIO SINO QUE SIGA RETROCEDIENDO EL TIEMPO? TE ESCRIBO EL CÓDIGO. GRACIAS DE ANTEMANO.

    (function ($) {
       "use strict";

       function getTimeRemaining(endtime) { 
         var t = Date.parse(endtime) – Date.parse(new Date());
         var seconds = Math.floor((t / 1000) % 60);
         var minutes = Math.floor((t / 1000 / 60) % 60);
         var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
         var days = Math.floor(t / (1000 * 60 * 60 * 24));
         return {
           'total': t,
           'days': days,
           'hours': hours,
           'minutes': minutes,
           'seconds': seconds
         };
       }

       function initializeClock(id, endtime) { 
         var daysSpan = $('.days');
         var hoursSpan = $('.hours');
         var minutesSpan = $('.minutes');
         var secondsSpan = $('.seconds');

         function updateClock() { 
           var t = getTimeRemaining(endtime);

           daysSpan.html(t.days);
           hoursSpan.html(('0' + t.hours).slice(-2));
           minutesSpan.html(('0' + t.minutes).slice(-2));
           secondsSpan.html(('0' + t.seconds).slice(-2))

           if (@t <= 0) {
             clearInterval(timeinterval);
           }
         }

         updateClock();
         var timeinterval = setInterval(updateClock, 1000);
       }

       var deadline = new Date(Date.parse(new Date()) + 69 * 24 * 60 * 60 * 1000 + 13 * 60 * 60 * 1000); 
       initializeClock('clockdiv', deadline);

    })(jQuery);

  4. gracias amigo me sirvio tus códigos ,al fin pude con tus códigos modificandolos un poco poniendo dentro de una barra que estaba encima de una barra de menú solo el txt de la fecha y hora y quitándole lo que es los cuadros que estaban metidos ahí y uniendolos en forma horizontal así " 5 de mayo del 2019 // 10:44:PM 23 Seg" y eliminando lo que es el wrap y el gadget del reloj.css y de mi pag principal y aparte sin dejar que funcione el documento reloj.js que no le toque para nada , gracias amigo me sirvio de mucho .

  5. Se que este video es de hace ya casi 4 años, pero viejo, como he aprendido en todo este curso!! Muchas cosas que pondre en practica hoy en adelante y mas esta ultima de "setInterval()" que me has dado la idea perfecta para un proyecto que tengo en curso… Muchas felicidades. Que Dios te bendiga y sigue asi man.

  6. Lo logré pero aún tengo dudas sobre si entendí para qué sirve cada cosa. Tendré que darle mucha práctica. Gracias por el vídeo, clarísimo como siempre.

  7. Muy bueno. Lo más interesante de este curso. Lo único que no me salió igual fue que cada párrafo se dispuso uno arriba del otro, en vez de aparecer como línea, pese a escribir inline-block y copiar tal cual el video. ¿Alguna sugerencia?

  8. Primeramente gracias por tus videos se nota que sabes mucho de programacion, ahora en 'este ejercicio no puedo enlazar mi archivo js con mi documento html, ya puse el <script src="reloj.js"></script> en el body pero me parece que no lo lee, los estilos.css sin problemas, y he revisado el codigo varias veces o habr'a que configurar algo con el editor atom que estoy usando, aunque no lo creo, alguna sugerencia gracias.

  9. Muy bueno tu curso, te deseo mucho éxito en todo lo que te propongas y gracias por compartir tus conocimientos, por ahora ya tengo una noción, me tocara seguir practicando para aprender, si tienes algún consejo de lo que sea te lo agradecería saludo.

  10. Para la gente que no le sale les deje los códigos de cada archivo. <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="utf-8">
    <title>Reloj con Oprime</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500" rel="stylesheet">
    </head>
    <body>
    <div class="wrap">
    <div class="widget">
    <div class="fecha">
    <p id="diaSemana" class="diaSemana"></p>
    <p id="dia" class="dia"></p>
    <p id="mes" class="mes"></p>
    <p id="year" class="year"></p>
    </div>
    <div class="reloj">
    <p id="horas" class="horas"></p>
    <p>:</p>
    <p id="minutos" class="minutos"></p>
    <p>:</p>

    <div class="caja-segundos">
    <p id="ampm" class="ampm"></p>
    <p id="segundos" class="segundos"></p>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <script src="script.js"></script>
    </body>
    </html>*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    body{
    background: url(lee.jpg) #000;
    background-size: cover;
    color: #fff;
    font-size: 16px;
    }

    .wrap{
    width: 90%;
    max-width: 1000px;
    /*margin:auto;*/
    }

    .widget{
    width: 40%;
    margin: 2em;
    /*margin:32px;*/
    }

    .widget p {
    display: inline-block;
    line-height: 1em;
    }

    .fecha {
    font-family: Oswald, Arial;
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 5px;
    background: rgba(0,0,0,.5);
    padding: 20px;
    width: 100%;
    }

    .reloj{
    font-family: Oswald, Arial;
    width: 100%;
    padding: 20px;
    font-size: 4em;
    text-align: center;
    background: rgba(0,0,0,.5);
    }

    .reloj .caja-segundos{
    display: inline-block;
    }

    .reloj .segundos, .reloj .ampm{
    font-size: 32px;
    display: block;
    }(function(){
    var actualizarHora = function(){
    var fecha = new Date(),
    horas = fecha.getHours(),
    ampm,
    minutos = fecha.getMinutes(),
    segundos = fecha.getSeconds(),
    diaSemana = fecha.getDay(),
    dia = fecha.getDate(),
    mes = fecha.getMonth(),
    year = fecha.getFullYear();

    var pHoras = document.getElementById('horas'),
    pAMPM = document.getElementById('ampm'),
    pMinutos = document.getElementById('minutos'),
    pSegundos = document.getElementById('segundos'),
    pDiaSemana = document.getElementById('diaSemana'),
    pDia = document.getElementById('dia'),
    pMes = document.getElementById('mes'),
    pYear = document.getElementById('year');

    var semana = ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'];
    pDiaSemana.textContent = semana[diaSemana];

    pDia.textContent = dia;

    var meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];

    pMes.textContent = meses[mes];

    pYear.textContent = year;

    if(horas >= 12){
    horas = horas – 12;
    ampm = 'PM';
    }else{
    ampm = 'AM';
    }

    if(horas == 0){
    horas = 12;
    };

    pHoras.textContent = horas;
    pAMPM.textContent = ampm;

    if(minutos <10){ minutos = "0" + minutos};
    if(segundos < 10){ segundos = "0" + segundos};
    pMinutos.textContent = minutos;
    pSegundos.textContent = segundos;

    };
    actualizarHora();
    var intervalo = setInterval(actualizarHora, 1000);
    }())

  11. hola buenas noches, excelentes tutoriales, me has ayudado demasiado, solo tengo una duda, que es el -webkit y -moz, no comprendo cuando usas estos en css, disculpen mi ignorancia, si algun compañero me aclara esa duda lo agradeceria..

  12. hace todo perfecto pero no muestra la hora en el index.html revise el codigo y esta todo OK. Cual puede ser el error, algun tip? Que debo hacer para que me pueda tomar la hora del sistema? estoy en windows 10.Gracias por compartir

Comments are closed.