TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Widget orologio digitale semplice per Weebly

57

Nel nostro articolo precedente, abbiamo spiegato come creare un orologio in stile analogico con HTML5 Canvas JavaScript. Creiamo un semplice widget orologio digitale per il sito Weebly. Il widget otterrà l’ora dall’orologio del computer e visualizzerà l’ora in ore, minuti e secondi. Di seguito è riportato come apparirà il widget.

Il widget contiene la parte CSS, JavaScript e HTML e spiegheremo uno per uno in dettaglio.

JavaScript per orologio digitale

Di seguito è riportato lo script per ottenere le ore, i minuti ei secondi dall’orologio del tuo computer. La prima riga di script è il collegamento alla libreria jQuery dello script per il funzionamento del widget.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function() { setInterval( function() { var hours = new Date().getHours(); $(".hours").html(( hours < 10? "0": "") + hours); }, 1000); setInterval( function() { var minutes = new Date().getMinutes(); $(".minutes").html(( minutes < 10? "0": "") + minutes); },1000); setInterval( function() { var seconds = new Date().getSeconds(); $(".seconds").html(( seconds < 10? "0": "") + seconds); },1000); }); </script>

Nota: nel caso in cui lo script non funzioni sul tuo sito Weebly, sostituisci la variabile $ con jQuery e pubblica nuovamente il sito.

CSS per il widget

Il CSS ha tre classi: .time, .clock e .align. La classe ".time" viene utilizzata per allineare i numeri dell’orologio mentre la classe ".clock" viene utilizzata per impostare gli stili dell’orologio. La classe ".align" viene semplicemente utilizzata per regolare il margine e la dimensione del carattere.

<style> .time { display: inline-block; color: #fff; } .clock { border: 1px solid yellow; border-radius: 5px; background-color: darkslateblue; text-align: center; color: #fff; } .align { margin: 15px; font-size: 40px; font-weight: 700; } </style>

HTML per il widget

Di seguito è riportato il codice HTML per il widget:

<div class="clock"> <div class="align"> <a><span class="time hours"></span></a>: <a><span class="time minutes"></span></a>: <a><span class="time seconds"></span></a> </div> </div>

I due punti: viene utilizzato come separatore tra ore, minuti e secondi.

Codice completo per il widget orologio digitale

Il widget completo apparirà come di seguito aggiungendo lo script, CSS e HTML insieme.

<html> <head> <style> .time { display: inline-block; color: #fff; } .clock { border: 1px solid yellow; border-radius: 5px; background-color: darkslateblue; text-align: center; color: #fff; } .align { margin: 15px; font-size: 40px; font-weight: 700; } </style> </head> <body> <div class="clock"> <div class="align"> <a><span class="time hours"></span></a>: <a><span class="time minutes"></span></a>: <a><span class="time seconds"></span></a> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function() { setInterval( function() { var hours = new Date().getHours(); $(".hours").html(( hours < 10? "0": "") + hours); }, 1000); setInterval( function() { var minutes = new Date().getMinutes(); $(".minutes").html(( minutes < 10? "0": "") + minutes); },1000); setInterval( function() { var seconds = new Date().getSeconds(); $(".seconds").html(( seconds < 10? "0": "") + seconds); },1000); }); </script> </body> </html>

Inserimento del widget nel sito Weebly

Ci sono molti modi per inserire il widget dell’orologio digitale nel tuo sito Weebly.

Personalizzazione del widget

Regola le seguenti proprietà CSS per personalizzare il widget in base alle tue esigenze:

  • Cambia il colore di sfondo modificando il "darkslateblue" in "background-color: darkslateblue;".
  • Cambia il colore dei numeri modificando il "color:#fff;" proprietà nella classe ".time".
  • Cambia il colore del separatore con "color:#fff;" sotto la classe ".clock".
  • Il peso del carattere, il margine e la dimensione del carattere possono essere regolati con le proprietà della classe ".align".

Di seguito sono riportati alcuni esempi di orologi digitali con diverse varianti di colore. Gli orologi sono affiancati nel sito Weebly utilizzando l’elemento di codice embed. È possibile visualizzare la demo degli orologi digitali sul sito Weebly qui.

Widget orologio digitale semplice per Weebly

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More