TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Yksinkertainen digitaalinen kello -widget Weeblylle

546

Aikaisemmassa artikkelissamme olemme selittäneet analogisen tyylin kellon luomisen HTML5 Canvas JavaScriptin avulla. Luodaan yksinkertainen digitaalinen kello -widget Weebly -sivustolle. Widget saa ajan tietokoneen kellosta ja näyttää ajan tunteina, minuutteina ja sekunteina. Alla on, miltä widget näyttää.

Widget sisältää CSS-, JavaScript- ja HTML -osan, ja selitämme yksityiskohtaisesti yksi kerrallaan.

JavaScript digitaalikellolle

Alla on komentosarja, jolla saat tuntimäärät, minuutit ja sekunnit tietokoneen kellosta. Ensimmäinen komentorivi on widgetin toimiva jQuery -kirjasto -linkki.

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

Huomautus: Jos komentosarja ei toimi Weebly -sivustossasi, korvaa $ -muuttuja arvolla jQuery ja julkaise sivusto uudelleen.

Widgetin CSS

CSS: llä on kolme luokkaa – .time, .clock ja .align. Luokkaa ".time" käytetään kellon numeroiden kohdistamiseen, kun taas ".clock" -luokkaa käytetään kellotyylien asettamiseen. ".Align" -luokkaa käytetään yksinkertaisesti marginaalin ja fonttikoon säätämiseen.

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

Widgetin HTML

Alla on widgetin HTML -koodi:

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

Kaksoispiste: käytetään erottimena tuntien, minuuttien ja sekuntien välillä.

Digitaalikello -widgetin täydellinen koodi

Koko widget näyttää alla olevalta lisäämällä komentosarja, CSS ja HTML yhdessä.

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

Widgetin lisääminen Weebly -sivustoon

On monia tapoja lisätä digitaalinen kello -widget Weebly -sivustoosi.

Widgetin mukauttaminen

Muokkaa seuraavia CSS -ominaisuuksia muokataksesi widgetin tarpeidesi mukaan:

  • Muuta taustaväriä muuttamalla "darkslateblue" kohdassa "background-color: darkslateblue;".
  • Muuta numeroiden väriä muokkaamalla "color: #fff;" kiinteistö ".time" -luokassa.
  • Vaihda erottimen väri valitsemalla "color: #fff;" .kello -luokassa.
  • Fontin painoa, marginaalia ja kirjasinkokoa voidaan säätää luokan ".align" ominaisuuksilla.

Alla on esimerkkejä digitaalisista kelloista, joissa on erilaisia ​​värivaihtoehtoja. Kellot sijoitetaan vierekkäin Weebly -sivustossa upotuskoodin avulla. Voit katsoa digitaalisten kellojen demon Weebly -sivustolta täältä.

Yksinkertainen digitaalinen kello -widget Weeblylle

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja