Reloj digital mínimo con JavaScript y CSS

Vista prévia

Descripción

Un simple, limpio < a href = "https://wikicss.com/tag/clock/" > reloj digital con AM/PM/día actual de visualización, implementar en JavaScript puro y CSS.

Funcionamiento

Cree el contenedor para mostrar el día de la semana.

<div class="days">

<div class="day">


<p class="monday">monday</p>

</div>


<div class="day">


<p class="tuesday">tuesday</p>

</div>


<div class="day">


<p class="wednesday">wednesday</p>

</div>


<div class="day">


<p class="thursday">thursday</p>

</div>


<div class="day">


<p class="friday">friday</p>

</div>


<div class="day">


<p class="saturday">saturday</p>

</div>


<div class="day">


<p class="sunday">sunday</p>

</div>
</div>

Cree el elemento para el reloj.

<div class="clock">

<!-- HOUR -->

<div class="numbers">


<p class="hours"></p>


<p class="placeholder">88</p>

</div>


<div class="colon">


<p>:</p>

</div>


<!-- MINUTE -->

<div class="numbers">


<p class="minutes"></p>


<p class="placeholder">88</p>

</div>


<div class="colon">


<p>:</p>

</div>


<!-- SECOND -->

<div class="numbers">


<p class="seconds"></p>


<p class="placeholder">88</p>

</div>



<!-- AM / PM -->

<div class="am-pm">



<!-- AM -->


<div>



<p class="am">am</p>


</div>



<!-- PM -->


<div>



<p class="pm">pm</p>


</div>

</div>

</div>

Cargue el archivo JavaScript principal al final del documento.

<script src="javascript/main.js"></script>

Los principales estilos CSS para el reloj digital.

@font-face {

font-family: 'digital-7';

src: url('../fonts/digital-7.ttf');
}

body {

color: #ffffff;

background-color: #000000;

font-family: 'digital-7', sans-serif;
}

/* DAYS OF THE WEEK */

div.days {

margin: 0 auto;

color: #131212;
}

div.days .day { display: inline-block; }

div.days .day p {

font-size: 12px;

font-weight: bold;

font-family: sans-serif;

text-transform: uppercase;
}

/* CLOCK */

div.clock { margin: 5px 0; }

div.clock div {

display: inline-block;

position: relative;
}

div.clock div p {

font-size: 100px;

position: relative;

z-index: 100;
}

div.clock .placeholder {

color: #131212;

position: absolute;

top: 0;

z-index: 50;
}

div.clock .meridian { margin-left: 15px; }/*END CLOCK*/

/* AM OR PM*/

.am-pm {

font-family: sans-serif;

text-transform: uppercase;

width: 20px;
}

div.am-pm div p {

font-size: 12px;

font-weight: bold;

width: 100%;
}

.am, .pm { color: #131212; }

/*CLASS THAT CHANGES COLOR OF TEXT TO APPEAR LIKE ITS "ON"*/

.light-on { color: #ffffff; }