Pubblicato il 20/08/19 - aggiornato il  | Nessun commento :

Mostrare data e orologio in un sito con secondi in tempo reale

Come mostrare un orologio digitale in un sito o in una pagina web con giorno della settimana, giorno, mese e anno, ora, minuti e secondi che si aggiornano in tempo reale
Sono molti i siti che amano mostrare data e orologio, anche se questi dati sono visibili anche nella Barra delle Applicazioni del computer, in cui si può anche visualizzare il giorno della settimana nel tooltip che si apre passandoci sopra con il mouse.

Ci sono anche numerosi servizi web che mettono a disposizione un codice da incollare in una pagina web per mostrare un orologio digitale anche con grafiche accattivanti. In questi codici però c'è sempre un link che punta al sito proprietario dell'orologio e questo può creare due diversi tipi di problemi.

Viene aggiunta una nuova chiamata HTTP che può rallentare l'apertura della pagina e il collegamento viene considerato da Google alla stregua di tutti gli altri. Si instaura quindi un flusso di Page Rank verso un sito che generalmente ha poco da spartire con gli argomenti trattati nel sito e questo danneggia obiettivamente il lato SEO.  


La soluzione migliore è quindi quella di creare un nostro orologio digitale, in modo assolutamente svincolato da altre risorse web, attraverso un codice javascript, peraltro molto semplice e che quindi non inciderà in modo significativo sulla pesantezza della pagina e sulla rapidità di apertura del sito. 





Il codice che andrò a presentare mostrerà Giorno della settimana, Giorno, Mese, Anno, Ora, Minuti e Secondi che si aggiornano in tempo reale. 

orologio-tempo-reale

Ho creato l'orologio digitale con lo stile italiano, che mette il giorno prima di quello del mese, al contrario di come avviene nel mondo anglosassone, e con i giorni della settimana che sono anch'essi nella nostra lingua.






Il codice da incollare in una pagina web in modalità HTML, o in un widget HTML/Javascript per gli utenti di Blogger, è il seguente, in cui si possono personalizzare codici dei colori, dimensioni e famiglia di font.

<script>
document.write("<font color='#036'>");
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>

I parametri e le righe da modificare sono stati colorati e evidenziati. Se inserito in un widget, si salva per poi posizionarlo con il trascinamento del cursore. L'ora è divisa dalla data da un salto di riga <br/>. Lo stile dell'ora è dato dalla riga evidenziata di giallo in cui impostare dimensione, colore e font, mentre quello della data è evidenziato di verde. Il colore dell'orologio digitale è quello determinato dal codice della seconda riga.





Possiamo anche mostrare l'orologio fisso nel layout mediante il tag position:fixed; e impostando la distanza dai bordi del layout. In questo caso il codice si può modificare in questo modo:

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

Tale codice può essere incollato in un widget HTML/Javascript, per poi essere salvato, senza bisogno di essere posizionato, visto che la posizione viene impostata dalla prima riga del codice. Con il codice proposto, top:100px; right:50px;, l'orologio verrà mostrato fisso a una distanza di 100 pixel dall'alto e di 50 pixel dalla destra. Lo stile dell'orologio viene impostato nella prima riga evidenziata di giallo in cui scegliere la dimensione dei caratteri, la famiglia di font e il grassetto mentre per il colore si può cambiare il codice #036'.


Nessun commento :

Posta un commento

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