<
  • Главная
Статьи

Зворотний відлік часу (jQuery плагін) - WiseREPORT

Сьогодні поговоримо про таймерах для сайтів. Наприклад, вам потрібно зробити зворотний відлік часу до закінчення акції або до події на вашому Лендінгем або в інтернет магазині. Само собою зрозуміло, таку штуку можливо реалізувати тільки через JavaScript. Винаходити велосипед не став, натомість знайшов відповідний jQuery плагін, з моєї точки зору найбільш добротно реалізований - jQuery Countdown Там же докладна документація на англійській мові.

У цій замітці мова піде про кастомними циферблаті і про приклад використання плагіна. Мені потрібен був великий яскравий циферблат, вирішив зробити по стилю нагадує годинник в метро подивитися демо На жаль, покласти прямо тут робочий лічильник не вийшло через дизайн - він вилазить за рамки блоку контенту. На жаль.



Крім іншого, хотілося поточний час для таймера отримувати з сервера, де налаштований сервіс точного часу (ntp). Хіба мало, у користувача годинник встановлені невірно, всяке буває. Отже, про плагіні розповів, про циферблат теж. Цікаво, що в плагіні передбачена локалізація на різні мови світу і враховуються числівники (1 хвилина, 10 хвилин, 53 хвилини). До речі вони, тобто підписи до секцій, змінюються разом з цифрами «онлайн».

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




Цифри навіть можна зробити на прозорому полотні, а зовнішнім виглядом рулити через CSS, власне, в наведеному прикладі майже так і зроблено, «корпус» таймера і тінь від нього, виконані виключно стилями. Підкладка спрайту, вибачте, чорна, на світлому фоні виглядати все одно не буде, так що питайте psd.

index.html

<! DOCTYPE html> <html> <head> <meta http-equiv = "Content-Type" content = "text / html; charset = utf-8"> <title> До Нового Року </ title> <link rel = "stylesheet" type = "text / css" href = "css / style.css" media = "all" /> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.12.4 /jquery.min.js "> </ script> <script src =" js / jquery.plugin.min.js "> </ script> <script src =" js / jquery.countdown.js "> </ script> <script src = "js / jquery.countdown-ru.js"> </ script> <script> $ (function () {var time = new Date (); var year = time.getFullYear () + 1; $. ajax ({url: 'time.php', // замініть на свій URL. dataType: 'text', success: function (text) {time = function () {return new Date (text);};}}); $ (document) .ajaxComplete (function () {var austDay = new Date (year, 0, 1); $ ( '# defaultCountdown'). countdown ({until: austDay, serverSync: time, layout: '<div class = "days"> <span class = "image {d100}"> </ span> <span class = "image {d10}"> </ span> <span class = "image {d1}"> </ span> { dl} </ div> '+' <span class = "imageSpace"> </ sp an> '+' <div class = "seconds"> <span class = "image {h10}"> </ span> <span class = "image {h1}"> </ span> {hl} </ div> '+' <span class = "imageSep"> </ span> '+' <div class = "seconds"> <span class = "image {m10}"> </ span> <span class = "image {m1} "> </ span> {ml} </ div> '+' <span class =" imageSep "> </ span> '+' <div class =" seconds "> <span class =" image {s10} "> </ span> <span class = "image {s1}"> </ span> {sl} </ div> '}); }); }); </ Script> <link rel = "stylesheet" type = "text / css" href = "css / style.css" media = "all" /> </ head> <body> <div class = "container"> < b> до Нового Року залишилося: </ b> <div id = "defaultCountdown"> </ div> </ div> </ body> </ html>

style.css

html {font-family: 'Arial narrow', tahoma; background: # fffee2; } #DefaultCountdown {margin: 0 auto; float: left; background: # 000; width: 685px; padding-left: 25px; height: 113px; padding-top: 17px; border-radius: 10px; border-width: 5px; border: 3px double # e2e2e2; -webkit-box-shadow: 0px 0px 45px 4px rgba (0,0,0,0.75); -moz-box-shadow: 0px 0px 45px 4px rgba (0,0,0,0.75); box-shadow: 0px 0px 45px 4px rgba (0,0,0,0.75); -webkit-box-shadow: 9px 14px 26px -9px rgba (0,0,0,0.75); -moz-box-shadow: 9px 14px 26px -9px rgba (0,0,0,0.75); box-shadow: 9px 14px 26px -9px rgba (0,0,0,0.75); } #DefaultCountdown span {display: block; float: left; width: 55px; height: 86px; background: url (../ img / counter.png) no-repeat 0px 0px; } #DefaultCountdown span.image0 {background-position: -602px 0px; } #DefaultCountdown span.image1 {background-position: -107px 0px; } #DefaultCountdown span.image2 {background-position: -162px 0px; } #DefaultCountdown span.image3 {background-position: -217px 0px; } #DefaultCountdown span.image4 {background-position: -272px 0px; } #DefaultCountdown span.image5 {background-position: -327px 0px; } #DefaultCountdown span.image6 {background-position: -382px 0px; } #DefaultCountdown span.image7 {background-position: -437px 0px; } #DefaultCountdown span.image8 {background-position: -492px 0px; } #DefaultCountdown span.image9 {background-position: -547px 0px; } #DefaultCountdown span.imageSep {background-position: -52px 0px; } #DefaultCountdown span.imageSpace {background-position: -0px 0px; } .Container {margin: 0 auto; width: 700px; height: 100px; text-align: center; margin-top: 10%; } .Container b {margin-bottom: 10px; display: block; font-size: 24px; } .Seconds {width: 110px; float: left; color: grey; } .Days {width: 165px; float: left; color: grey; }

root4root aka admin



Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

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

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью