Я думаю багато хто з Вас хочуть в своїх проектах використовувати свої напрацювання, але часто або на це не вистачає часу, або навичок. Тому сьогодні я розберу завдання створення таймера зворотного відліку в двох варіантах: таймер до певної дати і таймер на задану кількість годин, хвилин і секунд. Деякі напевно зрозуміли що насправді основна частина роботи піде на рішення першого завдання, так як друге завдання можна легко привести до першої (хочеться відзначити що вміння грамотно зводити свої завдання до вже вирішеним значно полегшує процес розробки). І так приступимо ...
Для початку визначимося з тим як ми реалізовуватиме наш таймер: функції, об'єкт або імітація класу. Функції я відкидаю одразу, це не дуже зручно, а ось об'єкт і «клас» звучить цілком не погано. Однак є ще один важливий момент: чи хочемо ми використовувати кілька таймерів на одній сторінці? Якщо так, то реалізація у вигляді об'єкта трохи ускладнить нашу задачу, так як об'єкт по суті - статичний клас, і нам доведеться реалізовувати роботу з масивом таймерів. Класи ж ніяк не перетинаються і можна створювати необмежена кількість таймерів, тому зупинимося на цьому варіанті. Заодно визначимося з тим, що таймер повинен створюватися в зазначеному елементі без ручного створення додаткової розмітки. І так поїхали ...
Створимо заготовку для створення js «класу»:
Якщо придивитися, то нам явно не вистачає налаштувань. Розширимо наш конструктор другим аргументом, що відповідає за налаштування нашого таймера. Налаштування будемо реалізовувати як об'єкт, який будемо порівнювати з настройками за замовчуванням. Тобто наприклад у нас є настройки «a», «b», «c» в конструктор ми передаємо тільки «a» і «с» => в нашому таймері настройки «a» і «c» будуть рівні зазначеним, а «b» візьметься за замовчуванням. Такий підхід використовується в більшості скриптів, так як він дуже зручний. Так само нам доведеться реалізувати такий механізм порівняння налаштувань, так як в штатних средсвами JS його немає. Так само заодно напишемо код розмітки нашого прийдешнього таймера.
Якщо все вірно, то у Вас повинно відобразитися 1000 Перейти до вашої сторінці. Трохи незрозуміло що до чого, тому додамо стиль, що б хоч як то розділити наші цифри.
Так само нам необхідно буде додати дві строчки в кінець нашого конструктора, щоб таймер починав відлік відразу після створення
Тепер якщо подивитися на нашу сторінку на, то таймер повинен працювати. Залишилося вирішити нашу другу задачу. Підхід до вирішення такої: якщо таймером вказано параметр timer з кількістю годин, хвилин і секунд, то обчислюємо дату яка буде через заданий інтервал, ставимо її як дату закінчення таймера і запусків таймер за алгоритмом завдання один. Я Добаль даний механімз в конструктор. І відразу приведу весь заключний код нашого таймера.
І невеликий демонструє приклад: