TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Enkel digital klockwidget för Weebly

3

I vår tidigare artikel har vi förklarat hur man skapar en analog klocka med HTML5 Canvas JavaScript. Låt oss skapa en enkel digital klockwidget för Weebly -webbplatsen. Widgeten hämtar tiden från datorns klocka och visar tiden i timmar, minuter och sekunder. Nedan är hur widgeten kommer att se ut.

Widgeten innehåller CSS, JavaScript och HTML -del och vi kommer att förklara en efter en i detalj.

JavaScript för digital klocka

Nedan finns en beskrivning för att få timmar, minuter och sekunder från datorns klocka. Den första manusraden är länken script jQuery -bibliotek för att widgeten ska fungera.

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

Obs! Om skriptet inte fungerar på din Weebly -webbplats, ersätt $ variabeln med jQuery och publicera webbplatsen igen.

CSS för widgeten

CSS har tre klasser – .tid, .klocka och .align. Klassen ".time" används för att justera klocknumren medan ".clock" -klassen används för att ställa in klockstilarna. ". Align" -klassen används helt enkelt för att justera marginalen och teckensnittsstorleken.

<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 för widgeten

Nedan är HTML -koden för 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>

Tjocktarmen: används som separator mellan timmar, minuter och sekunder.

Komplett kod för den digitala klockwidgeten

Hela widgeten kommer att se ut nedan genom att lägga till manus, CSS och HTML tillsammans.

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

Infoga widgeten i Weebly -webbplatsen

Det finns många sätt att infoga den digitala klockwidgeten på din Weebly -webbplats.

Anpassa widgeten

Justera följande CSS -egenskaper för att anpassa widgeten efter dina behov:

  • Ändra bakgrundsfärgen genom att ändra "darkslateblue" i "bakgrundsfärg: darkslateblue;".
  • Ändra färg på siffrorna genom att ändra "färg: #fff;" egendom under klassen ".time".
  • Ändra separatorns färg med "color: #fff;" under klassen ".clock".
  • Teckensnittsvikt, marginal och teckenstorlek kan justeras med egenskaperna ".align".

Nedan följer några exempel på digitala klockor med olika färgvariationer. Klockorna placeras sida vid sida på Weebly -webbplatsen med hjälp av inbäddningskodelement. Du kan se demografin för digitala klockor på Weebly -webbplatsen här.

Enkel digital klockwidget för Weebly

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer