Afisarea orei in pagina HTML nu este chiar o necesitate, avand in vedere ca vizitatorul poate afla ora in foarte multe moduri. Ba mai mult, pe pagina WEB ora afisata este ce a serverului host si e posibil ca aceasta sa nu aiba legatura cu ora locala a proprietarului site-ului daca host-ul este in alta tara. Aceasta inconvenienta poate fi insa ''reglata'' de catre programator.

Dar in situatia in care ai un site de e-commerce si un client face o comanda, este foarte bine sa dai clientului informatia legata de ora ta locala pentru a sti cand sa se astepte sa inceapa activitatea aferenta livrarii comenzii lui.

Din aceste motive sau doar din cele legate de design este bine sa punem pe site-ul nostru un ceas care sa indice ora locala a proprietarului site-ului.

De aceea va sugerez sa cititi amanuntele acestui articol.

Sunt multe solutii pe internet, dar marea majoritate afecteaza tag-ul BODY cu argumentul onload, asa cum era si vechea solutie postata pe blogul marfa-gratis.blogspot.com.

Problema

Sa afisam pe pagina noastra un ceas, fie in format analogic fie in format digital.

Solutie

Se adauga in tag-ul HEAD informatiile pentru stil.

Pentru un ceas analogic.

body{background: #6699FF;}
#clock_a{float:left;padding:25px 0 0 25px;}

iar pentru un ceas digital:

body{background: #6699FF;}
.jclock{color:#FFFFFF;float:left;font-size:42px;font-weight:bold;padding:80px 0 0 125px;}

Evident, aici este locul in care va puteti juca cu culorile, cu marimea caracterelor in cazul ceasului digital si cu pozitia in pagina.

Tot in tag-ul HEAD inserati liniile care incarca scripturile JS aferente.

Pentru un ceas analogic:

In scriptul clockp.js veti putea modifica aspectul si marimea ceasului.

Pentru un ceas digital:

La acesta, in plus, va trebui sa activati scriptul prin:

In locul unde doriti sa apara widget-ul, inserati un tag DIV.

Pentru un ceas analogic:

<div id="clock_a"> </div>

iar pentru un ceas digital:

<div class="jclock"> </div>