TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Enkel digital klokke -widget for Weebly

1

I vår tidligere artikkel har vi forklart hvordan du lager analog klokke med HTML5 Canvas JavaScript. La oss lage en enkel digital klokke -widget for Weebly -nettstedet. Widgeten vil få tiden fra klokken på datamaskinen din og vise tiden i timer, minutter og sekunder. Nedenfor ser du hvordan widgeten vil se ut.

Widgeten inneholder CSS, JavaScript og HTML -del, og vi vil forklare en etter en om detaljene.

JavaScript for digital klokke

Nedenfor er skriften for å få timer, minutter og sekunder fra datamaskinens klokke. Den første skriptlinjen er linken script jQuery -bibliotek for at widgeten skal fungere.

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

Merk: Hvis skriptet ikke fungerer på Weebly -nettstedet ditt, kan du erstatte $ -variabelen med jQuery og publisere nettstedet på nytt.

CSS for widgeten

CSS har tre klasser – .time, .clock og .align. Klassen “.time" brukes til å justere klokkenumrene mens klokken “.clock” brukes til å sette opp klokkestilene. “. Align” -klassen brukes ganske enkelt til å justere marginen og skriftstørrelsen.

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

Nedenfor er HTML -koden for widgeten:

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

Tykktarmen: brukes som separator mellom timer, minutter og sekunder.

Komplett kode for Digital Clock Widget

Den komplette widgeten vil se ut som nedenfor ved å legge til skriptet, CSS og HTML sammen.

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

Sette inn widgeten i Weebly -nettstedet

Det er mange måter å sette inn den digitale klokke -widgeten på ditt Weebly -nettsted.

Tilpasse widgeten

Juster følgende CSS -egenskaper for å tilpasse widgeten etter ditt behov:

  • Endre bakgrunnsfargen ved å endre "darkslateblue" i "bakgrunnsfarge: darkslateblue;".
  • Endre farge på tallene ved å endre “color: #fff;” eiendom under klassen ".tid".
  • Endre fargen på skilletegnet med “color: #fff;” under klokken ".clock".
  • Skriftvekt, margin og skriftstørrelse kan justeres med egenskapene ".align".

Nedenfor er noen av eksemplene på digitale klokker med forskjellige fargevariasjoner. Klokkene plasseres side om side i Weebly -området ved hjelp av innebygd kodeelement. Du kan se demoen for digitale klokker på Weebly -siden her.

Enkel digital klokke -widget for Weebly

Opptakskilde: webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon