Javascript

Reloj digital en Javascript con formato 24 horas

Reloj_24
Compartir en:

Javascript

function startTime() {
    var today = new Date();
    var hr = today.getHours();
    var min = today.getMinutes();
    var sec = today.getSeconds();
    min = checkTime(min);
    sec = checkTime(sec);
    document.getElementById("fecha").innerHTML = hr + " : " + min + " : " + sec;
    var time = setTimeout(function(){ startTime() }, 500);
}
function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

Código Html

<body onload="startTime()">
  <div class="container">
    <div id="fecha"></div>
  </div>
</body>

Css

body{
  background-image: url("../fondo.jpg");
  background-size: cover;
  background-attachment: fixed;
}
.container {
    background-color: crimson;
    padding:25px;
    max-width:350px;
    width:100%;
    text-align:center;
    border-radius:5px;
    margin:0 auto;
    margin-top:15%;
}
#fecha{
    background-color: black;
    font-family: sans-serif;
    font-size:60px;
    text-shadow:0px 0px 1px #fff;
    border: 1px solid white;
    color:#fff;
}
#fecha span {
    color:#888;
    text-shadow:0px 0px 1px #333;
    font-size:30px;
    position:relative;
    top:-27px;
    left:-10px;
}

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *