Reloj LED digital animado con JavaScript y CSS

Vista prévia

Descripción

Un reloj digital animado que utiliza JavaScript y CSS/CSS3 para crear una pantalla antigua de 7 segmentos para mostrar la hora local en la Página Web.

Funcionamiento

La estructura HTML para crear un reloj LED de 7 segmentos en su página web.

<div class="clock">

<div class="digit hours">


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>

</div>


<div class="digit hours">


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>

</div>


<div class="separator"></div>


<div class="digit minutes">


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>

</div>


<div class="digit minutes">


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>

</div>


<div class="separator"></div>


<div class="digit seconds">


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>

</div>


<div class="digit seconds">


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>


<div class="segment"></div>

</div>
</div>

El CSS requerido para el estilo del reloj.

.clock {

height:200px;

position:absolute;

top:50%;

left:50%;

width:900px;

margin-left:-450px;

margin-top:-100px;

text-align:center;
}

.digit {

width:120px;

height:200px;

margin:0 5px;

position:relative;

display:inline-block;
}

.digit .segment {

background:#c00;

border-radius:5px;

position:absolute;

opacity:0.15;

transition:opacity 0.2s;

-webkit-transition:opacity 0.2s;

-ms-transition:opacity 0.2s;

-moz-transition:opacity 0.2s;

-o-transition:opacity 0.2s;
}

.digit .segment.on, .separator {

opacity:1;

box-shadow:0 0 50px rgba(255,0,0,0.7);

transition:opacity 0s;

-webkit-transition:opacity 0s;

-ms-transition:opacity 0s;

-moz-transition:opacity 0s;

-o-transition:opacity 0s;
}

.separator {

width:20px;

height:20px;

background:#c00;

border-radius:50%;

display:inline-block;

position:relative;

top:-90px;
}

.digit .segment:nth-child(1) {

top:10px;

left:20px;

right:20px;

height:10px;
}

.digit .segment:nth-child(2) {

top:20px;

right:10px;

width:10px;

height:75px;

height:calc(50% - 25px);
}

.digit .segment:nth-child(3) {

bottom:20px;

right:10px;

width:10px;

height:75px;

height:calc(50% - 25px);
}

.digit .segment:nth-child(4) {

bottom:10px;

right:20px;

height:10px;

left:20px;
}

.digit .segment:nth-child(5) {

bottom:20px;

left:10px;

width:10px;

height:75px;

height:calc(50% - 25px);
}

.digit .segment:nth-child(6) {

top:20px;

left:10px;

width:10px;

height:75px;

height:calc(50% - 25px);
}

.digit .segment:nth-child(7) {

bottom:95px;

bottom:calc(50% - 5px);

right:20px;

left:20px;

height:10px;
}

El núcleo JavaScript para activar el reloj.

var digitSegments = [


[1,2,3,4,5,6],


[2,3],


[1,2,7,5,4],


[1,2,7,3,4],


[6,7,2,3],


[1,6,7,3,4],


[1,6,5,4,3,7],


[1,2,3],


 [1,2,3,4,5,6,7],


[1,2,7,3,6]
]

document.addEventListener('DOMContentLoaded', function() {

var _hours = document.querySelectorAll('.hours');

var _minutes = document.querySelectorAll('.minutes');

var _seconds = document.querySelectorAll('.seconds');



setInterval(function() {


var date = new Date();


var hours = date.getHours(), minutes = date.getMinutes(), seconds = date.getSeconds();






setNumber(_hours[0], Math.floor(hours/10), 1);


setNumber(_hours[1], hours%10, 1);



setNumber(_minutes[0], Math.floor(minutes/10), 1);


setNumber(_minutes[1], minutes%10, 1);



setNumber(_seconds[0], Math.floor(seconds/10), 1);


setNumber(_seconds[1], seconds%10, 1);

}, 1000);
});

var setNumber = function(digit, number, on) {

var segments = digit.querySelectorAll('.segment');

var current = parseInt(digit.getAttribute('data-value'));


// only switch if number has changed or wasn't set

if (!isNaN(current) && current != number) {


// unset previous number


digitSegments[current].forEach(function(digitSegment, index) {



setTimeout(function() {




segments[digitSegment-1].classList.remove('on');



}, index*45)


});

}



if (isNaN(current) || current != number) {


// set new number after


setTimeout(function() {



digitSegments[number].forEach(function(digitSegment, index) {




setTimeout(function() {





segments[digitSegment-1].classList.add('on');




}, index*45)



});


}, 250);


digit.setAttribute('data-value', number);

}
}