Biblioteca de JavaScript para mostrar la hora local actual alrededor del mundo-jsclock

Vista prévia

Descripción

jsclock es una biblioteca independiente de JavaScript para crear un reloj mundial para mostrar la hora local actual en todo el mundo basado en la zona horaria.

Funcionamiento

Cargue Clock. js en su página HTML.

<script src="clock.js"></script>

Crea el HTML para el reloj mundial.

<div class="myclock">

<div>In Paris, it is</div>

<div id="CET"></div>
</div>
<div class="myclock">

<div>while in Los Angeles it is</div>

<div id="America/Los_Angeles"></div>
</div>

<div class="myclock">

<div>Did you know that Caracas is in UTC-4:30?</div>

<div id="America/Caracas"></div>
</div>

Inicialice el reloj.

JsClock.showTime('CET');
JsClock.showTime('America/Los_Angeles');
JsClock.showTime('America/Caracas');

Como el reloj está incrustado en el elemento contenedor definido por el usuario, su estilo general se puede personalizar según sea necesario.

.myclock {

font-size: 18pt;

background-color: #f0fff0;

text-align: center;

width: 20%;

height: 10%;

margin-left: auto;

margin-right: auto;

margin-top: 20px;
}

/* date-time formatting is done with dedicated css styles: */

.jsclock-date-sep:after { content: "/"; }

.jsclock-time-sep:after { content: ":"; }

.jsclock-datetime-sep:after { content: " "; }

/* every element can be customized with own style; some elements additionally have common style classes */

.jsclock-date-element { font-size: 14pt; }

.jsclock-hours { font-size: 26pt; }

.jsclock-minutes { font-size: 26pt; }

/* when clock is being initialied, its 'loading' element can also be customized: */

.jsclock-loading { font-size: 12pt; }