Сьогодні поговоримо про таймерах для сайтів. Наприклад, вам потрібно зробити зворотний відлік часу до закінчення акції або до події на вашому Лендінгем або в інтернет магазині. Само собою зрозуміло, таку штуку можливо реалізувати тільки через 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