TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Widget d’horloge numérique simple pour Weebly

353

Dans notre article précédent, nous avons expliqué comment créer une horloge de style analogique avec HTML5 Canvas JavaScript. Créons un simple widget d’ horloge numérique pour le site Weebly. Le widget obtiendra l’heure de l’horloge de votre ordinateur et affichera l’heure en heures, minutes et secondes. Voici à quoi ressemblera le widget.

Le widget contient des parties CSS, JavaScript et HTML et nous expliquerons un par un les détails.

JavaScript pour l’horloge numérique

Vous trouverez ci-dessous le script pour obtenir les heures, les minutes et les secondes de l’horloge de votre ordinateur. La première ligne de script est le lien de la bibliothèque de script jQuery pour que le widget fonctionne.

<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>

Remarque : si le script ne fonctionne pas sur votre site Weebly, remplacez la variable $ par jQuery et publiez à nouveau le site.

CSS pour le widget

Le CSS a trois classes – .time, .clock et .align. La classe ".time" est utilisée pour aligner les numéros d’horloge tandis que la classe ".clock" est utilisée pour configurer les styles d’horloge. La classe ".align" est simplement utilisée pour ajuster la marge et la taille de la police.

<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 pour le widget

Vous trouverez ci-dessous le code HTML du 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>

Le deux-points: est utilisé comme séparateur entre les heures, les minutes et les secondes.

Code complet pour le widget Horloge numérique

Le widget complet ressemblera à ci-dessous en ajoutant le script, CSS et HTML ensemble.

<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>

Insertion du widget dans le site Weebly

Il existe de nombreuses façons d’insérer le widget horloge numérique dans votre site Weebly.

Personnalisation du widget

Ajustez les propriétés CSS suivantes pour personnaliser le widget selon vos besoins :

  • Changez la couleur de fond en modifiant le «darkslateblue» dans «background-color: darkslateblue; ».
  • Changez la couleur des nombres en modifiant la "color:#fff;" propriété sous la classe ".time".
  • Changez la couleur du séparateur avec le "color:#fff;" sous la classe ".clock".
  • Le poids, la marge et la taille de la police peuvent être ajustés avec les propriétés de la classe « .align ».

Vous trouverez ci-dessous quelques exemples d’horloges numériques avec différentes variations de couleurs. Les horloges sont placées côte à côte dans le site Weebly à l’aide d’un élément de code intégré. Vous pouvez voir la démo des horloges numériques sur le site Weebly ici.

Widget d'horloge numérique simple pour Weebly

Source d’enregistrement: www.webnots.com

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails