D4mations.com

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:
http://www.falconmasters.com

♦ Necesitas ayuda con el tutorial? Únete a nuestra comunidad:
http://www.heroesdelaweb.com
—

♦ Curso de HTML desde 0:

♦ Curso de CSS desde 0:

♦ Curso de Javascript desde 0:

♦ Código del Proyecto:
[ Articulo en Progreso ]

—
Redes Sociales:

♦ Twitter @falconmasters:

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

Original source

d4mer

, , , , , , , , , , , , , ,

37 responses to “Tutorial Como hacer un Reloj con HTML, CSS y Javascript”

  3. me lanza estos errores quien sabe..e sta todo exactamente igual al video..

    (function(){

    var actualizarHora = function(){
    var fecha = new Date(),
    hora = 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', 'Nobiembre', 'Diciembre' ];
    pMes.textContent = meses[meses];

    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);

    }())

    ////////////////////////////////// ERRORES ////////////
    reloj.js:25 Uncaught TypeError: Cannot set property 'textContent' of null
    at actualizarHora (reloj.js:25)
    at reloj.js:57
    at reloj.js:60

    como lo resuelvo

  4. muy buen video tengo una consulta como pudiera hacer para agregar botones y manipular este reloj como si fuera uno de pulsera es decir que pudiera cambiar menu a cmodo cronometro y si quisirera cambiar la zona horaria de la que estamos!!!!!
    saludo

  6. Para el que no entienda porque "horas == 12" no es lo mismo que "horas = 12" es porque "==" Es un booleano, es decir que esta comparando los valores y retornara "true" o "false" en cambio "=" no es un booleano, si no que es el signo igual de toda la vida y este si sirve para cambiar valores :3

  14. bueno para empezar quiero decir que como profesor eres exelente, todo lo explicas muy entendible, pero tengo un inconveniente con el reloj, y es que no soy capaz de invocar el codigo js a mi codigo html, y sabes q lo q hice fue escribir paso a paso tu codigo, pero nada amigo mio, en este momento no puedo mandarte mi codigo, porq el pc lo consegui por momentos y justo ahora no lo tengo, pero te digo q guarde el archivo justo al lado del html, otra cosa, el css, si lo pude invocar muy bien, sin problemas, se q no me puedes ayudar si las pruebas, pero cualquier aporte seria ayuda para mi, una vez mas te agradezco mucho tu enseñanza, he aprendido mucho.

  16. amigos por favor saquenme de una duda que tengo, al poner estilo CSS a las clases ampm, segundos no se aplican los display block, los cito de la siguiente manera:
    .ampm, .segundos{
    display:block;
    font-size:2em;
    }

  19. Me salio igual, el tema es que lo estoy haciendo a las 05 am de mi hora local, y me muestra 5:07:12 si le agrego un if al igual que en los minutos para que me muestre un "0" delante del 5 no me lo muestra, por ej, la linea de codigo que se usa para los minutos es if (minutos < 10) { minutos = "0" + minutos }; igual que para los segundos if (segundos < 10) { segundos = "0" + segundos}; si le agrego otro if para la hora no me muestra el string "'0" para que me quede 05.
    Porque pasa esto?

  35. Hola falcoon, he seguido tus totos.
    Queria saber si sabes o puedes ayudarme con un tfa (doble factor de autenticacion), como el que usa whattsap, para una mejor seguridad, es que necesito que una app scanner me lea un codigo y se comparta con la pagina web, para asi comprobar que el usuario que va a usar la pagina es realmente el usuario de la pagina, por favor, cualquier cosa, documentacion de como funciona la de whattsap seria genial, muchas gracias.

Leave a Reply