Come mostrare data, ora minuti e secondi nel blog.

Come installare un orologio digitale con data e giorno della settimana in un widget o flottante nel layout.

Nel precedente post ho parlato dei servizi per inserire nel nostro sito un countdown e cercando su internet possiamo trovare anche siti che offrono dei widget per gli orologi digitali come ClockLink e ClockEasy con quest'ultimo che può servire anche per i countdown.   

In questo articolo vedremo come mostrare in una sidebar ora e data correnti a tutti i visitatori che aprono il nostro sito. Si tratta di un puro javascript che può essere modificato a piacimento nei colori e nella dimensione e famiglia di caratteri. I secondi continueranno a essere correttamente visualizzati e continueranno a scattare anche dopo la completa apertura della pagina.

La lingua e lo stile della data è quello italiano che mette il numero del giorno prima di quello del mese. Per questo widget non occorre modificare il modello. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla questo codice

<script>
document.write("<font color='#de24b0'>");
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>
<div style="text-align:center; font-size : 22px; font-weight:bold' font-family:Georgia;">
<script>orologio()</script></div>
<br/>
<div style="text-align:center; font-size : 18px; font-weight:bold' font-family: Georgia;">
<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></div>

Si salva e si posiziona con il mouse. L'ora è divisa dalla data da un salto di riga <br/>. Lo stile dell'ora è dato dalla riga evidenziata di giallo mentre quello della data è evidenziato di verde. Il colore è quello determinato dal codice della seconda riga. 

MOSTRARE IL WIDGET FISSO NEL LAYOUT

Se volete mostrare data e ora in modo fisso allo scorrere della pagina il codice muta così

<div style="position:fixed; top:120px; right:75px; text-align:center; font-size : 18px; font-weight:bold' font-family: Georgia;">
<script>
document.write("<font color='#de24b0'>");
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>
<script>orologio()</script>
<br/>
<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></div>

dove le impostazioni sono tutte comprese nelle prime righe. In particolare per quello che riguarda il posizionamento top:120px; right:75px; significa una distanza di 120 pixel dalla parte alta e di 75 pixel dalla destra. Si possono anche usare i tag bottom e left al posto di top e right.