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.

Presa franceză , pune întrebări incomode care ar putea face lumină în plandemia 

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.

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

iar pentru un ceas digital:

1
2
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:

1
2
<script src="js/clockp.js" type="text/javascript"></script>
<script src="js/clockh.js" type="text/javascript"></script>

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

Pentru un ceas digital:

1
2
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.jclock-1.2.0.js" type="text/javascript"></script>

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

1
2
3
4
5
<script type="text/javascript">// <![CDATA[
$(function($) {
    $('.jclock').jclock();
});
// ]]></script>

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: