Come inserire un orologio digitale nel blog insieme alla data.

Nel web ci sono molti siti specializzati in orologi da inserire nei blog. Ho già avuto modo di presentarne alcuni che propongono orologi in flash o anche countdown, allarmi e cronometri. Adesso voglio invece illustrare come inserire l'ora digitale in modo assolutamente indipendente da qualsiasi altro sito ma utilizzando solo del codice javascript. Questi orologi possono essere personalizzati come dimensioni, colori e posizione nel layout e sono sincronizzati con l'ora ufficiale europea e quindi anche italiana.

Ho pensato di dare due alternative, la prima prevede l'inserimento dell'orologio in una sidebar o comunque nel layout del blog, con la seconda invece l'orologio sarà fisso nello schermo e rimarrà sempre in primo piano anche quando si scorrerà la pagina.

• Demo dell'orologio digitale nella sidebar -

 

Per l'installazione dell'orologio fisso occorre andare su Design > Aggiungi un gadget > HTML/Javascript e incollare questo codice in Sezioni del sito

<script>
document.write("<font color='#940F04'>");
var clockid=new Array()
var clockidoutside=new Array()
var i_clock=-1
var thistime= new Date()
var hours=thistime.getHours()
var minutes=thistime.getMinutes()
var seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
var thistime = hours+":"+minutes+":"+seconds
      
function orologio() {
       i_clock++
       if (document.all || document.getElementById || document.layers) {
               clockid[i_clock]="clock"+i_clock
               document.write("<span id='"+clockid[i_clock]+"' style='position:relative'>"+thistime+"</span>")
       }
} 
function clockon() {
       thistime= new Date()
       hours=thistime.getHours()
       minutes=thistime.getMinutes()
       seconds=thistime.getSeconds()
       if (eval(hours) <10) {hours="0"+hours}
       if (eval(minutes) < 10) {minutes="0"+minutes}
       if (seconds < 10) {seconds="0"+seconds}
       thistime = hours+":"+minutes+":"+seconds
              
       if (document.all) {
               for (i=0;i<=clockid.length-1;i++) {
                       var thisclock=eval(clockid[i])
                       thisclock.innerHTML=thistime
               }
       }
      
       if (document.getElementById) {
               for (i=0;i<=clockid.length-1;i++) {
                       document.getElementById(clockid[i]).innerHTML=thistime
               }
       }
       var timer=setTimeout("clockon()",1000)
}
window.onload=clockon
</script>
<noscript><a href='http://goo.gl/4UuNA' target='_blank'><span style='font-size: x-small;'>Digital Clock</span></a></noscript>
<div style="text-align:center; padding:4px; font-size : 22px; font-weight:bold' font-family: trebuchet MS, arial;">
<script>orologio()</script></div>

Si clicca su Salva e si posiziona l'elemento pagina con il mouse. Le personalizzazioni sono state colorate di rosso e riguardano:

1. Il colore dell'orologio  color='#940F04'
2. L'allineamento dentro l'elemento pagina text-align:center; dove center può essere sostituito da left o right
3. La distanza tra l'orologio e l'esterno padding:4px;
4. Le dimensioni dei caratteri font-size : 22px;
5. La visualizzazione in grassetto font-weight:bold'
6. La famiglia di caratteri font-family: trebuchet MS, arial;

Ciascuno di questi parametri può essere variato per adattarlo all'aspetto del blog. La seconda opzione che presento prevede l'inserimento dell'orologio in una modalità flottante nel senso che rimarrà fisso quando si scorre la pagina

• Demo dell'orologio digitale flottante -

Il codice da incollare su Design > Aggiungi un gadget > HTML/Javascript è il seguente

<script>
document.write("<font color='#003366'>");
var clockid=new Array()
var clockidoutside=new Array()
var i_clock=-1
var thistime= new Date()
var hours=thistime.getHours()
var minutes=thistime.getMinutes()
var seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
var thistime = hours+":"+minutes+":"+seconds      
function orologio() {
       i_clock++
       if (document.all || document.getElementById || document.layers) {
               clockid[i_clock]="clock"+i_clock
               document.write("<span id='"+clockid[i_clock]+"' style='position:relative'>"+thistime+"</span>")
       }
} 
function clockon() {
       thistime= new Date()
       hours=thistime.getHours()
       minutes=thistime.getMinutes()
       seconds=thistime.getSeconds()
       if (eval(hours) <10) {hours="0"+hours}
       if (eval(minutes) < 10) {minutes="0"+minutes}
       if (seconds < 10) {seconds="0"+seconds}
       thistime = hours+":"+minutes+":"+seconds
              
       if (document.all) {
               for (i=0;i<=clockid.length-1;i++) {
                       var thisclock=eval(clockid[i])
                       thisclock.innerHTML=thistime
               }
       }
      
       if (document.getElementById) {
               for (i=0;i<=clockid.length-1;i++) {
                       document.getElementById(clockid[i]).innerHTML=thistime
               }
       }
       var timer=setTimeout("clockon()",1000)
}
window.onload=clockon
</script>
<noscript><a href='http://goo.gl/4UuNA' target='_blank'><span style='font-size: x-small;'>Digital Clock</span></a></noscript>
<div style="position:fixed; top:120px; right:75px; font-size : 22px; font-weight:bold' font-family: trebuchet MS, arial;">
<script>orologio()</script></div>

Si clicca su Salva. L'orologio con queste impostazioni apparirà in alto a destra del layout. Anche in questo caso si può procedere alle personalizzazioni

1. Per il colore, il grassetto, la famiglia di font e la dimensione dei caratteri si opera come nel caso precedente quindi non sto a ripetermi
2. La posizione dell'orologio è determinata dagli attributi position:fixed; top:120px; right:75px; il che significa che il nostro digital clock rimane fisso a una distanza di 120 pixel dalla parte alta e di 75 pixel dalla destra. Se si mette absolute al posto di fixed, l'orologio rimane immobile nel punto assegnatogli. Oltre a variare le distanze si può anche sostituire top con bottom e right con left per configurare le distanze rispetto alla parte bassa e a quella sinistra.

Se oltre all'ora corrente si vuole visualizzare anche la data, si può inserire nello stesso elemento pagina del codice con cui ho illustrato come mostrare la data corrente nel blog. In quel caso l'ora rimaneva immobile se non si rinfrescava la pagina. Per avere un grande effetto si può sostituire quella parte del codice con questa. Ecco un esempio di come potrebbero essere ora e data viste assieme 

<font color="#191919" size="3">Sono le </font><script>
document.write("<font color='#003366'>");
var clockid=new Array()
var clockidoutside=new Array()
var i_clock=-1
var thistime= new Date()
var hours=thistime.getHours()
var minutes=thistime.getMinutes()
var seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
var thistime = hours+":"+minutes+":"+seconds      
function orologio() {
       i_clock++
       if (document.all || document.getElementById || document.layers) {
               clockid[i_clock]="clock"+i_clock
               document.write("<span id='"+clockid[i_clock]+"' style='position:relative'>"+thistime+"</span>")
       }
}
function clockon() {
       thistime= new Date()
       hours=thistime.getHours()
       minutes=thistime.getMinutes()
       seconds=thistime.getSeconds()
       if (eval(hours) <10) {hours="0"+hours}
       if (eval(minutes) < 10) {minutes="0"+minutes}
       if (seconds < 10) {seconds="0"+seconds}
       thistime = hours+":"+minutes+":"+seconds
              
       if (document.all) {
               for (i=0;i<=clockid.length-1;i++) {
                       var thisclock=eval(clockid[i])
                       thisclock.innerHTML=thistime
               }
       }
      
       if (document.getElementById) {
               for (i=0;i<=clockid.length-1;i++) {
                       document.getElementById(clockid[i]).innerHTML=thistime
               }
       }
       var timer=setTimeout("clockon()",1000)
}
window.onload=clockon
</script>
<noscript><a href='http://goo.gl/4UuNA' target='_blank'><span style='font-size: x-small;'>Digital Clock</span></a></noscript>
<div style="display:inline; font-size :16px; font-weight:bold' font-family:trebuchet MS, arial;">
<script>orologio()</script></div><font color="#191919" size="3"> di </font><font color="#003366" size="3"><b><script type="text/JavaScript">
var mydate=new Date()
var year=mydate.getYear()
if (year <1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Domenica ","Lunedì ","Martedì ","Mercoledì ","Giovedì ","Venerdì ","Sabato ")
var montharray=new Array("/ 01 /","/ 02 /"," / 03 /"," / 04 /","/ 05 /","/ 06 /","/ 07 /","/ 08 /","/ 09 /","/ 10 /","/ 11 /","/ 12 /")
document.write(dayarray[day]+" "+daym+" "+montharray[month]+" "+year)
</script></b></font>

Lascio al lettore le personalizzazioni che sono evidenziate di rosso per quello che riguarda colori e dimensioni e di blu per le parole aggiuntive da inserire nell'orario digitale con calendario. Il codice va incollato su Design > Aggiungi un gadget > HTML/Javascript e posizionato con il mouse

• Demo dell'orario digitale con calendario -