Таймер зворотного відліку для сайту

12

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

Таймер зворотного відліку для сайтуТаймер зворотного відліку для сайту

Логіку скрипта ми напишемо на мові Javascript, з використанням бібліотеки jQuery. А візуальне оформлення створимо за допомогою звичайного HTML. Для тих, хто не знає, бібліотека jQuery – це бібліотека, написана на мові Javascript. Якщо сказати іншими словами, то це набір готових функцій, для полегшення взаємодії Javascript і HTML.. Ця бібліотека надає нам дуже великий вибір різних функцій і методів доступу до атрибутів і вмісту вибраних елементів. Отже, давайте приступимо.

1. Створення HTML-розмітки.

Першим ділом створимо візуальну частину нашого скрипта, тобто розмітку на основі HTML. Для цього створимо новий файл під назвою index.html. Ось з таким вмістом:

Таймер зворотного відліку

:

:

:

Як Ви бачите є загальний контейнер з ідентифікатором id=»timer_wrap», в якому розташований наш таймер. У ньому міститься допоміжний контейнер з ідентифікатором id=»clock», який служить для більш гарного відображення таймера. Далі зверніть увагу, що в контейнерах з ідентифікатором id=’day’ id=’hour, ‘id=’min’ id=’sec’ будуть містяться — дні, години, хвилини і секунди відповідно. Між цими контейнерами вставлені блоки з ідентифікатором id=»razd», які служать роздільниками для кожного елемента таймера (як зазвичай роздільник часу — це символ «:»). Так як кожен елемент часу таймера (секунди, хвилини, години, дні) виводиться у двозначному форматі, то для більш гарного відображення часу я передбачив для кожного розряду часу свій блок. Наприклад, для відображення секунд передбачений блок з ідентифікатором id=’sec’ і для кожного розряду передбачений свій блок: для одиниць — блок id=’sec1′, для десятків id=’sec0′. Інші елементи часу за аналогією.

Тепер необхідно створити файл для збереження правил css, для нашого скрипта, як Ви бачите я підключаю файл style.css, тому його і створимо. Ось його зміст:

#hour,#min,#sec,#day {
float:left;
padding:5px;
width:48px;
height:55px;
position:relative;
display:block;
}
p {
margin:0px;
padding:0px;
width:24px;
height:55px;
float:left;
color:#ffffff;
font-size:3em;
font-weight:bold;
position:absolute;
}
#sec1,#min1,#hour1,#day1 {
margin-left:24px;
}
#timer_wrap {
background-color:#515151;
border-radius:10px;
height:65px;
width:340px;
padding:15px 18px;
}
#clock {
border:1px solid white;
border-radius:10px;
height:65px;
width:298px;
background:url(clock.jpg) left top no-repeat;
padding:0px 20px 0px 20px;
position:absolute;
}
#razd {
float:left;
color:#ffffff;
font-weight:bold;
font-size:3em;
margin:3px 0px 0px 3px;
}
#stop {
color:white;
font-size:2em;
margin:15px 10px 10px 25px;
position:absolute;
}

Тепер, якщо подивитися в браузері, то ми побачимо ось таку заготовку для нашого таймера.

Таймер зворотного відліку для сайту

Тепер нам залишилося створити сам таймер і вивести на екран.

2. Підготовка до кодування на Javascript.

Насамперед давайте створимо порожній файл script.js, в якому будуть зберігатися скрипти на мові Javascript, і збережемо його в папці js. Далі давайте підключимо цей файл до нашого скрипта (між тегами head):

Далі нам знадобиться бібліотека jQuery, яку можна завантажити з офіційного сайту http://jquery.com клікнувши на кнопку DOWNLOAD. Після скачування бібліотеки також її збережемо в папці js і підключимо до нашого скрипта:

3. Створюємо логіку таймера.

Отже, для початку перейдемо в файл script.js і відкриємо код для роботи з бібліотекою jQuery:

$(document).ready(function () {
//код jQuery
});

Як Ви пам’ятаєте, для того що б почати роботу з бібліотекою jQuery, необхідно вибрати елемент document нашої сторінки, і для нього викликати обробник події ready (який спрацює після повного завантаження сторінки), і в цьому процесорі описуємо функцію в тілі якій і ведемо кодування з використанням бібліотеки jQuery.

Тепер приступимо до написання логіки таймера. Робота таймера буде заснована на періодичному виклик функції, яка при кожному своєму виклик, буде вимірювати кількість мілісекунд, від поточного часу, і до відліку часу (час від якого необхідно вести зворотний відлік), при цьому виводить результат на екран у зручному для нас вигляді (у вигляді стандартних годин). Звичайно, цю функцію ми будемо викликати з інтервалом в одну секунду, для точного виводу секунд нашого таймера. Тобто за один виклик функції ми будемо проводити один вимір часу і виводити його на екран.

Отже, давайте створимо функцію get_timer() яка і буде функцією виклику таймера. Далі в цій функції створимо змінну date_new, в якій будемо зберігати дату від якої потрібно вести зворотний відлік. Дата буде представляти собою рядок формату:

Місяць, День,Рік ЧЧ:ММ

Наприклад, якщо ми хочемо призначити датою відліку 1 липня 2012 року і час 12.00, то рядок необхідно сформувати таким чином:

July 1,2012 12:00

Тепер давайте наведу частину коду функції для подальших пояснень:

//функція виклику таймера
function get_timer() {
//Дата для зворотного відліку
var date_new = «May 22,2012 22:00»;
////////////////////////////////////
////////////////////////////////////
//Об’єкт дати для зворотного відліку
var date_t = new Date(date_new);
//Об’єкт поточної дати
var date = new Date();
//Обчислюємо скільки мілісекунд пройде
//від поточної дати до дати відліку часу
var timer = date_t — date;
}

Зверніть увагу, далі створюємо об’єкт класу Date (записуємо його в змінну date_t) і передаємо його конструктору — дату відліку часу. Клас Date призначений для роботи з датами і часом. Якщо конструктору, не передавати будь-яких значень, то буде створений об’єкт класу Date з поточною датою і часом. Яку, ми можемо вивести, якщо нам це необхідно. Дата і час в об’єкті Date, зберігаються не в явному вигляді, а у вигляді кількості мілісекунд пройшли з 0 годин 0 хвилин 1 січня 1970 року. Тому ми можемо дізнатися, скільки пройде мілісекунд між часом відліку і поточною датою, що ми і робимо і зберігаємо результат в змінну timer.

Тобто змінної timer у нас міститься кількість мілісекунд до часу відліку. Значить, нам залишилося тільки дізнатися, скільки це буде днів, годин, хвилин і секунд, а потім просто вивести це на екран. Першим ділом переведемо мілісекунди в звичне для нас час (продовжуємо кодувати функцію get_timer()):

//Перевіряємо чи не потрібно закінчити відлік
//якщо дата відліку ще не закінчилася, то кількість
//мілісекунд у змінній date_t буде більше ніж змінної date
if(date_t > date) {
//Обчислюємо скільки залишилося днів до дати відліку.
//Для цього кількість мілісекунд до дати відліку ділимо
//на кількість мілісекунд в одному дні
var day = parseInt(timer/(60*60*1000*24));
//якщо отримане число менше 10 додаємо 0
if(day < 10) {
day = ‘0’ + day;
}
//Наводимо результат до рядка
day = day.toString();
//Обчислюємо скільки залишилося годин до дати відліку.
//Для цього змінну timer ділимо на кількість
//мілісекунд в одній годині і відкидаємо дні
var hour = parseInt(timer/(60*60*1000))%24;
//якщо отримане число менше 10 додаємо 0
if(hour < 10) {
hour = ‘0’ + hour;
}
//Наводимо результат до рядка
hour = hour.toString();
//Обчислюємо скільки залишилося хвилин до дати відліку.
//Для цього змінну timer ділимо на кількість
//мілісекунд в одній хвилині і відкидаємо годинник
var min = parseInt(timer/(1000*60))%60;
//якщо отримане число менше 10 додаємо 0
if(min < 10) {
min = ‘0’ + min;
}
//Наводимо результат до рядка
min = min.toString();
//Обчислюємо скільки залишилося секунд до дати відліку.
//Для цього змінну timer ділимо на кількість
//мілісекунд в одній хвилині і відкидаємо хвилини
var sec = parseInt(timer/1000)%60;
//якщо отримане число менше 10 додаємо 0
if(sec < 10) {
sec = ‘0’ + sec;
}
//Наводимо результат до рядка
sec = sec.toString();
}
else {
$(«#clock»).html(«Відлік закінчений!!!«);
}

Отже, для початку зробимо невелику перевірку, але не закінчений чи відлік. Якщо кількість мілісекунд у змінній date_t більше ніж у змінній – date, значить необхідно продовжувати відлік. Якщо ж менше – то ми з допомогою jQuery робимо вибірку блоку з ідентифікатором clock ($(«#clock»)) і за допомогою методу html() вставляємо в обраний блок дані, які передані йому параметром (метод html() виводить дані, які передані йому параметром, обраний блок).

Насамперед знайдемо кількість днів до дати відліку. Для цього змінну таймер ділимо на кількість мілісекунд в одному дні, а це можна дізнатися з виразу– 24*60*60*1000 (в одній секунді 1000 мілісекунд, в одній хвилині 60 секунд в одній годині 60 хвилин і в одному дні 24 години). За допомогою функції parseInt() ми відкидаємо у результату дробову частину, так як ця функція, призводить рядок, передану їй параметром, до целочисленному результату (просто кажучи, повертає число, а якщо це неможливо, то NaN). Далі якщо число, що вийшло менше 10 – додаємо 0, так як кожен елемент часу потрібно виводити в двозначному форматі. І потім з допомогою методу toString() наводимо одержаний результат (змінну day), до строковому типу даних (це нам знадобиться для більш гарного відображення часу, але про це пізніше). Як бачите тут все просто – трохи математики і все.

Далі годинник визначаємо за аналогією з днями, тільки змінну ділимо вже на кількість мілісекунд в одній годині. Але тепер необхідно відкинути дні, так як ми зараз отримали загальна кількість годин до зазначеної дати відліку. Для цього ми з допомогою операції – залишок від ділення відкидаємо дні. Для позначення цієї операції використовується символ — % і повертає ця операція — залишок від ділення лівого операнда на правий операнд. Тобто ми як би ділимо загальне число одержані годин на 24-кількість годин в одному дні) і беремо від результату лише залишок від ділення – так як ціла частина від ділення – це вже дні, а ми їх вже отримали.

Потім знаходимо хвилини – все за аналогією. Змінну таймер ділимо на кількість мілісекунд в одній хвилині і відкидаємо години (як і в наведеному вище прикладі – беремо залишок від ділення загальної кількості хвилин на 60 – кількість хвилин в одній годині).

І останнє, знаходимо секунди. Для цього всі також ділимо змінну таймер на кількість мілісекунд в одній секунді і відкидаємо хвилини. Всі також беремо залишок від ділення загальної кількості секунд на 60 – кількість секунд в одній хвилині.

Отже, в принципі таймер у нас готовий залишилося красиво вивести його на екран і періодично викликати створену нами функцію. Але перед цим давайте перевіримо себе і виведемо на екран те, що у нас вийшло. Для цього вставимо в функцію код (нижче після розрахунку секунд):

alert(day + » : «+ hour + » : «+ min + » : «+ sec);

Потім після коду функції викличемо її на виконання:

//Викликаємо функцію на виконання
get_timer();

І тепер, задавши будь-який час для відліку таймера, переходимо в браузер і оновимо нашу сторінку. Як Ви бачите, з’явилася напис з часом який залишається до зазначеної дати відліку.

Таймер зворотного відліку для сайту

4. Виводимо таймер на екран.

Але, звичайно, зараз наш таймер не працює, так як він не вважає час. Вірніше вважає, але робить лише один вимір часу за один виклик функції. Тому давайте це виправимо, а заодно красиво виведемо наш таймер на екран (код з функцією alert(), можна видалити, або закоментувати):

//Виводимо дні
//Перевіряємо які попередні цифри часу повинні вывестись на екран
//Для десятків днів
if(day[1] == 9 &&
hour[0] == 2 &&
hour[1] == 3 &&
min[0] == 5 &&
min[1] == 9 &&
sec[0] == 5 &&
sec[1] == 9) {
animation($(«#day0»),day[0]);
}
else {
$(«#day0»).html(day[0]);
}
//Для одиниць днів
if(hour[0] == 2 &&
hour[1] == 3 &&
min[0] == 5 &&
min[1] == 9 &&
sec[0] == 5 &&
sec[1] == 9) {
animation($(«#day1»),day[1]);
}
else {
$(«#day1»).html(day[1]);
}
//Виводимо годинник
//Перевіряємо які попередні цифри часу повинні вывестись на екран
//Для десятків годин
if(hour[1] == 3 &&
min[0] == 5 &&
min[1] == 9 &&
sec[0] == 5 &&
sec[1] == 9) {
animation($(«#hour0»),hour[0]);
}
else {
$(«#hour0»).html(hour[0]);
}
//Для одиниць годин
if(min[0] == 5 &&
min[1] == 9 &&
sec[0] == 5 &&
sec[1] == 9) {
animation($(«#hour1»),hour[1]);
}
else {
$(«#hour1»).html(hour[1]);
}
//Виводимо хвилини
//Перевіряємо які попередні цифри часу повинні вывестись на екран
//Для десятків хвилин
if(min[1] == 9 &&
sec[0] == 5 &&
sec[1] == 9) {
animation($(«#min0»),min[0]);
}
else {
$(«#min0»).html(min[0]);
}
//Для одиниць хвилин
if(sec[0] == 5 && sec[1] == 9) {
animation($(«#min1»),min[1]);
}
else {
$(«#min1»).html(min[1]);
}
//Виводимо секунди
//Перевіряємо які попередні цифри часу повинні вывестись на екран
//Для десятків секунд
if(sec[1] == 9) {
animation($(«#sec0»),sec[0]);
}
//Для одиниць секунд
else {
$(«#sec0»).html(sec[0]);
}
animation($(«#sec1»),sec[1]);
//Періодично викликаємо створену функцію,
//інтервал виклику одна секунда(1000 міллі секунд)
setTimeout(get_timer,1000);

Отже, на цьому наша функція виклику таймера готова. Виводити час таймера я планую з невеликою анімацією. Тобто, як тільки буде змінюватися якась цифра таймера, то буде відбуватися невеликий скачок цієї цифри (цифра буде як би опускатися вниз, плавно з’являючись), роблячи наш таймер більш красивим і сучасним. Але для цього потрібно перевіряти, які йдуть попереду цифри часу, що б знати зміниться число чи ні.

Зверніть увагу, в самому кінці коду функції, я викликаю функцію setTimeout(), за допомогою якої викликається наша створювана функція через одну секунду (вона викликається рівно один раз). Тобто ми один раз викликаємо функцію самі, а наступні рази, вона викликає сама себе з інтервалом в одну секунду.

Тепер так як змінні day, hour, min sec у нас мають строковий тип даних, то ми можемо звертатися до будь-якого символу цих змінних використовуючи індекси — їх номеру в рядку. Наприклад якщо у змінній day у нас записана рядок 10, 1 — це символ з індексом 0, а 0 — з індексом 1, означає для виведення першого символу цієї змінної можна написати ось так day[0].

Далі (пояснення веду з кінця коду функції) виводимо на екран одиниці секунд (як я і говорив секунди виводяться у двозначному форматі — перше число це десятки, друге — одиниці) . Для виведення використовуємо функцію animation() (код якої я наведу нижче), яка використовується для анімованого виведення елементів таймера. Тобто одиниці секунд у нас завжди виводяться з анімацією, так як вони змінюються кожну секунду. Далі, десятки секунд потрібно виводити з анімацією тільки тоді, коли одиниці секунд рівні 9 (sec[1] == 9), так як в цьому випадку десятки змінять своє значення. В іншому випадку десятки повинні бути нерухомі. Значить якщо sec[1] == 9, то ми виводимо десятки секунд за допомогою функції animation($(«#sec0»),sec[0]), якщо ж ні, то ми виводимо десятки просто використовуючи метод (html) ($(«#sec0»).html(sec[0]);).

Далі одиниці хвилин, потрібно виводити з анімацією тільки тоді, коли десятки секунд рівні 5 (sec[0] == 5) і одиниці секунд рівні 9 (sec[1] == 9). Потім десятки хвилин також необхідно виводити з анімацією лише тоді, коли одиниці хвилин дорівнюють 9 (min[1] == 9 ) і десятки секунд рівні 5 (sec[0] == 5) і одиниці секунд рівні 9 (sec[1] == 9).

Далі для годин і днів все за аналогією, просто додаємо перевірку попереднього числа, яке повинно вывестись на екрані. Звичайно, трохи заплутано по початку, для сприйняття, але тут нічого складного немає, просто звичайні маніпуляції з числами.

Тепер наведу код функції, яка виводить на екран елементи таймера за допомогою анімації:

//Функція для гарного відображення часу.
function animation(vibor,param) {
vibor.html(param)
.css({‘marginTop’:’-20px’,’непрозорість’:’0′})
.animate({‘marginTop’:’0px’,’непрозорість’:’1′});
}

Насамперед зверніть увагу на параметри, які необхідно передавати цієї функції. Перший параметр — це звичайна вибірка jQuery, приміром $(«#min0»). Другий параметр — це дані, які ми вставляємо в обраний блок (а вибірка у нас передається в змінну vibor). Потім ми пишемо вибірку (зберігається в змінної vibor), далі викликаємо метод html() – яким передаємо параметром змінну param (а в ній збережені дані для вставки). Потім викликаємо метод css() з допомогою якого задаємо стилі для нашої вибірки. Тобто ми трохи піднімаємо обраний блок вгору, за допомогою правила marginTop (зверніть увагу як в цьому методі записуються правила складаються з двох слів), із значенням -20px і задаємо повну прозорість обраного блоку, тобто як би приховуємо даний блок. Далі викликаємо метод animate(), який дає можливість нам, створювати власну анімацію спираючись на правила css, які ми йому передаємо. Приміром, якщо у блоку ширина 100px і методом animate() ми передаємо правило для ширини рівне 300px. На екрані ми побачимо плавне збільшення ширини блоку до 300px.

Методом animate() ми передаємо правила css, які будуть опускати вибірку на своє звичайне місце розташування, а також прибирати прозорість в блоці з вибіркою.

Отже, якщо оновити браузер, то на екрані буде виведено ось такий таймер зворотного відліку.

Таймер зворотного відліку для сайту

Як мені здається, таймер вийшов досить непоганий і красивий.

Отже, на цьому робота над таймером у нас закінчена. Таймер вийшов повністю працездатним і сучасним.

Якщо виникнуть питання — пишіть, спробуємо на них відповісти. Всього доброго! Вдалого Вам кодування і до нових зустрічей!!!