Crear un reloj digital con Date utilizando Javascript

El objeto Date de Javascript se utiliza para trabajar con fechas y horas. Para crear un objeto Date, debes utilizar la sintaxis new Date(). Mediante este objeto, puedes crear un reloj digital en Javascript. En este artículo, veremos una manera simple de crear un reloj digital con Date utilizando Javascript. Además, podrás utilizar este script en cualquier proyecto web en el que quieras mostrar un reloj digital.

En este artículo veremos tres formatos para el reloj, uno con formato 24 horas, otro con formato de 12 horas y un reloj con la fecha actual. En primer lugar veremos el código Javascript y después, el código HTML.

Código Javascript

En la función startTime(), utilizamos new Date() para definir el actual objeto Date. Extraemos la hora, minutos, segundos, día, mes, año y fecha utilizando las funciones getHours(), getMinutes(), getSeconds(), getDay(), getMonth(), getFullYear() y getDate() respectivamente.

Al final de la función startTime(), utilizamos el método setTimeOut() para llamar a la función startTime() cada 500 milisegundos. Cuando cargue la página se ejecutará startTime() mediante el evento onload del body.

Reloj digital con formato 24 horas.

function startTime() {
    var today = new Date();
    var hr = today.getHours();
    var min = today.getMinutes();
    var sec = today.getSeconds();
    //Add a zero in front of numbers<10
    min = checkTime(min);
    sec = checkTime(sec);
    document.getElementById("clock").innerHTML = hr + " : " + min + " : " + sec;
    var time = setTimeout(function(){ startTime() }, 500);
}
function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

Reloj digital con formato 12 horas.

function startTime() {
    var today = new Date();
    var hr = today.getHours();
    var min = today.getMinutes();
    var sec = today.getSeconds();
    ap = (hr < 12) ? "<span>AM</span>" : "<span>PM</span>";
    hr = (hr == 0) ? 12 : hr;
    hr = (hr > 12) ? hr - 12 : hr;
    //Add a zero in front of numbers<10
    hr = checkTime(hr);
    min = checkTime(min);
    sec = checkTime(sec);
    document.getElementById("clock").innerHTML = hr + " : " + min + " : " + sec + " " + ap;
    var time = setTimeout(function(){ startTime() }, 500);
}
function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

Reloj digital con fecha actual.

function startTime() {
    var today = new Date();
    var hr = today.getHours();
    var min = today.getMinutes();
    var sec = today.getSeconds();
    ap = (hr < 12) ? "<span>AM</span>" : "<span>PM</span>";
    hr = (hr == 0) ? 12 : hr;
    hr = (hr > 12) ? hr - 12 : hr;
    //Add a zero in front of numbers<10
    hr = checkTime(hr);
    min = checkTime(min);
    sec = checkTime(sec);
    document.getElementById("clock").innerHTML = hr + ":" + min + ":" + sec + " " + ap;
    
    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    var curWeekDay = days[today.getDay()];
    var curDay = today.getDate();
    var curMonth = months[today.getMonth()];
    var curYear = today.getFullYear();
    var date = curWeekDay+", "+curDay+" "+curMonth+" "+curYear;
    document.getElementById("date").innerHTML = date;
    
    var time = setTimeout(function(){ startTime() }, 500);
}
function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

Código HTML

Antes que nada, hay que llamar a la función startTime() en el evento onLoad del elemento body de nuestra web.

<body onload="startTime()">

HTML para mostrar el reloj digital:

<div id="clockdate">
  <div class="clockdate-wrapper">
    <div id="clock"></div>
    <div id="date"></div>
  </div>
</div>

CSS

Puedes personalizar el reloj digital basándote en el estilo de tu sitio web. Aquí tienes el código CSS que hemos utilizado nosotros para personalizar el reloj.

.clockdate-wrapper {
    background-color: #333;
    padding:25px;
    max-width:350px;
    width:100%;
    text-align:center;
    border-radius:5px;
    margin:0 auto;
    margin-top:15%;
}
#clock{
    background-color:#333;
    font-family: sans-serif;
    font-size:60px;
    text-shadow:0px 0px 1px #fff;
    color:#fff;
}
#clock span {
    color:#888;
    text-shadow:0px 0px 1px #333;
    font-size:30px;
    position:relative;
    top:-27px;
    left:-10px;
}
#date {
    letter-spacing:10px;
    font-size:14px;
    font-family:arial,sans-serif;
    color:#fff;
}

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
ARTÍCULO ANTERIOR