TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Простий віджет цифрових годин для Weebly

1

У нашій попередній статті ми пояснили, як створити годинник в аналоговому стилі з HTML5 Canvas JavaScript. Давайте створимо простий віджет цифрових годин для сайту Weebly. Віджет отримуватиме час із годинника вашого комп’ютера та відображатиме час у годинах, хвилинах та секундах. Нижче показано, як буде виглядати віджет.

Віджет містить частину CSS, JavaScript та HTML, і ми детально розповімо про це окремо.

JavaScript для цифрового годинника

Нижче наведено скрипт, щоб отримати години, хвилини та секунди від годинника вашого комп’ютера. Перший рядок сценарію – це посилання на бібліотеку сценарію jQuery для роботи віджета.

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

Примітка: Якщо сценарій не працює на вашому веб -сайті Weebly, замініть змінну $ на jQuery і опублікуйте сайт знову.

CSS для віджетів

CSS має три класи – .time, .clock і .align. Клас ".time" використовується для вирівнювання номерів годин, а клас ".clock" – для налаштування стилів годинника. Клас ".align" просто використовується для регулювання поля та розміру шрифту.

<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 для віджетів

Нижче наведено код HTML для віджета:

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

Двокрапка: використовується як роздільник між годинами, хвилинами та секундами.

Повний код для віджета цифрового годинника

Повний віджет буде виглядати, як показано нижче, додавши сценарій, CSS та 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>

Вставлення віджета на веб -сайт Weebly

Існує багато способів вставити віджет цифрового годинника на свій сайт Weebly.

Налаштування віджета

Налаштуйте такі властивості CSS, щоб налаштувати віджет відповідно до ваших потреб:

  • Змініть колір фону, змінивши “darkslateblue" у “background-color: darkslateblue;”.
  • Змініть колір чисел, змінивши “color: #fff;” майно класу ".time".
  • Змініть колір роздільника за допомогою "color: #fff;" під класом ".clock".
  • Вагу шрифту, поля та розмір шрифту можна регулювати за допомогою властивостей класу “.align”.

Нижче наведено деякі приклади цифрових годинників з різними колірними варіаціями. Годинники розміщені поруч на веб -сайті Weebly, використовуючи елемент коду для вбудовування. Демонстрацію цифрових годинників можна переглянути на веб -сайті Weebly тут.

Простий віджет цифрових годин для Weebly

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі