8 maggio 2011 Ultimo aggiornamento:

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.

orologio digitale 

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

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





4 commenti :

  1. Ciao, senti ma per realizzare un orologio che abbia l'ora di un altro fuso? come faccio?
    grazie
    J

    RispondiElimina
  2. @Jacopo Zibardi
    Per mettere un orologio con un altro fuso orario ti consiglio un widget più sofisticato come per esempio questi
    http://www.ideepercomputeredinternet.com/2008/08/due-siti-per-inserire-gratis-orologi-in.html
    o quest'altri
    http://www.ideepercomputeredinternet.com/2009/09/clockeasy-per-inserire-orologi.html

    RispondiElimina
  3. Ciao Ernesto, mi sono appena iscritta al tuo blog... che per fortuna esiste! ;)
    E' difficilissimo avere informazioni e aiuto da chi ne sa più di te, perciò grazie per it tutorial e per l'aiuto che dai a noi "ignoranti" in materia di codici e compagnia bella! :)
    Una domanda...
    Vorrei provare a creare degli orologi, ma inseriti all'interno di un'immagine, un rettangolo colorato, ad esempio...
    Come e dove devo modificare i codici che hai inserito in questo post? :)
    Spero mi saprai aiutare...
    Grazie! :)

    RispondiElimina
    Risposte
    1. @VictoriaPlum
      In fondo basterebbe ti inserire un colore di sfondo immagino, o una immagine.
      Per mettere un sfondo inserisci all'inizio del codice dell'orologio questa riga
      <div style="background:#EEEEAA;">
      e quest'altra
      </div>
      alla fine del codice. Il codice del colore può essere personalizzato.
      Se invece vuoi mettere una immagine di sfondo all'inizio del codice devi mettere la riga
      <div style="background-image:url(Indirizzo_Immagine)no-repeat;">
      e alla fine sempre
      </div>
      dove l'immagine deve essere caricata su Picasa.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.