TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Prosty widżet zegara cyfrowego dla Weebly

77

W naszym wcześniejszym artykule wyjaśniliśmy, jak stworzyć zegar w stylu analogowym za pomocą JavaScript HTML5 Canvas. Stwórzmy prosty widget zegara cyfrowego dla witryny Weebly. Widżet pobierze czas z zegara komputera i wyświetli czas w godzinach, minutach i sekundach. Poniżej przedstawiamy jak będzie wyglądał widżet.

Widget zawiera część CSS, JavaScript i HTML, a my szczegółowo wyjaśnimy je po kolei.

JavaScript dla zegara cyfrowego

Poniżej znajduje się skrypt pokazujący godziny, minuty i sekundy z zegara komputera. Pierwsza linia skryptu to link do biblioteki jQuery skryptu do działania widgetu.

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

Uwaga: Jeśli skrypt nie działa na Twojej witrynie Weebly, zamień zmienną $ na jQuery i opublikuj witrynę ponownie.

CSS dla widżetu

CSS ma trzy klasy – .time, .clock i .align. Klasa „.time" służy do wyrównywania numerów zegara, podczas gdy klasa „.clock” służy do konfigurowania stylów zegara. Klasa „.align” służy po prostu do dostosowania marginesów i rozmiaru czcionki.

<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 dla widżetu

Poniżej znajduje się kod HTML widżetu:

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

Dwukropek: jest używany jako separator między godzinami, minutami i sekundami.

Kompletny kod widżetu zegara cyfrowego

Kompletny widżet będzie wyglądał jak poniżej, dodając razem skrypt, CSS i HTML.

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

Wstawianie widżetu w witrynie Weebly

Istnieje wiele sposobów na umieszczenie widżetu zegara cyfrowego w witrynie Weebly.

Dostosowywanie widżetu

Dostosuj następujące właściwości CSS, aby dostosować widżet do swoich potrzeb:

  • Zmień kolor tła, modyfikując „darkslateblue” w „background-color: darkslateblue;”.
  • Zmień kolor liczb, modyfikując „kolor:#fff;” właściwość w klasie „.time”.
  • Zmień kolor separatora za pomocą „color:#fff;” w klasie „.clock”.
  • Grubość czcionki, margines i rozmiar czcionki można dostosować za pomocą właściwości klasy „.align”.

Poniżej kilka przykładów zegarów cyfrowych o różnych wariantach kolorystycznych. Zegary są umieszczane obok siebie w witrynie Weebly za pomocą elementu kodu embed. Demo zegarów cyfrowych można obejrzeć na stronie Weebly tutaj.

Prosty widżet zegara cyfrowego dla Weebly

Źródło nagrywania: www.webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów