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

Простой виджет цифровых часов для Weebly

4

В нашей предыдущей статье мы объяснили, как создать часы аналогового стиля с помощью 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
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее