От автора: разнообразные акции, распродажи, скидки и т.д. – распространенный маркетинговый ход современных торговых отношений, который часто используется в интернет магазинах. Наверное, каждый из Вас сталкивался с таким понятием как таймер обратного отсчета, определяющий сначала фиксированную дату начала, а затем время до окончания какой-либо акции или распродажи. Подобный скрипт исключает необходимость лишних подсчетов и делает сайт более эффектным и современным. В этом уроке я предлагаю Вам создать это полезное веб-приложение вместе.
Логику скрипта мы напишем на языке Javascript, с использованием библиотеки jQuery. А визуальное оформление создадим с помощью обычного HTML. Для тех, кто не знает, библиотека jQuery – это библиотека, написанная на языке Javascript. Если сказать другими словами, то это набор готовых функций, для облегчения взаимодействия Javascript и HTML.. Эта библиотека предоставляет нам очень большой выбор различных функций и методов по доступу к атрибутам и содержимому выбранных элементов. Итак, давайте приступим.
1. Создание HTML разметки.
Первым делом создадим визуальную часть нашего скрипта, то есть разметку на основе HTML. Для этого создадим новый файл под названием index.html. Вот с таким содержимым:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> <title>Таймер обратного отсчета</title> </head> <body> <div id="timer_wrap"> <div id="clock"> <div id='day'> <p id='day0'></p> <p id='day1'></p> </div> <div id="razd"> : </div> <div id='hour'> <p id='hour0'></p> <p id='hour1'></p> </div> <div id="razd"> : </div> <div id='min'> <p id='min0'></p> <p id='min1'></p> </div> <div id="razd"> : </div> <div id='sec'> <p id='sec0'></p> <p id='sec1'></p> </div> </div> </div> </body> </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, поэтому его и создадим. Вот его содержимое:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
#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:0px 3px 0px 3px; } #stop { color:white; font-size:2em; margin:15px 10px 10px 25px; position:absolute; } |
Теперь, если посмотреть в браузере, то мы увидим вот такую заготовку для нашего таймера.
Теперь нам осталось создать сам таймер и вывести на экран.
2. Подготовка к кодированию на Javascript.
Первым делом давайте создадим пустой файл script.js, в котором будут храниться скрипты на языке Javascript, и сохраним его в папке js. Далее давайте подключим этот файл к нашему скрипту (между тегами head):
|
1 |
<script type="text/javascript" src="js/script.js"></script> |
Далее нам понадобится библиотека jQuery, которую можно скачать с официального сайта //jquery.com кликнув по кнопочке DOWNLOAD. После скачивания библиотеки также ее сохраним в папке js и подключим к нашему скрипту:
|
1 |
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> |
3. Создаем логику таймера.
Итак, для начала перейдем в файл script.js и откроем код для работы с библиотекой jQuery:
|
1 2 3 4 |
$(document).ready(function () { //код jQuery }); |
Как Вы помните, для того что бы начать работу с библиотекой jQuery, необходимо выбрать элемент document нашей страницы, и для него вызвать обработчик события ready (который сработает после полной загрузки страницы), и в этом обработчике описываем функцию в теле которой и ведем кодирование с использованием библиотеки jQuery.
Теперь приступим к написанию логики таймера. Работа таймера будет основана на периодическом вызове функции, которая при каждом своем вызове, будет измерять количество миллисекунд, от текущего времени, и до времени отсчета (время от которого необходимо вести обратный отсчет), при этом выводя результат на экран в удобном нам виде (в виде стандартных часов). Конечно, эту функцию мы будем вызывать с интервалом в одну секунду, для точного вывода секунд нашего таймера. То есть за один вызов функции мы будем проводить один замер времени и выводить его на экран.
Итак, давайте создадим функцию get_timer() которая и будет функцией вызова таймера. Далее в этой функции создадим переменную date_new, в которой будем хранить дату от которой нужно вести обратный отсчет. Дата будет представлять собой строку формата:
Месяц День,Год ЧЧ:ММ
К примеру, если мы хотим назначить датой отсчета 1 июля 2012 года и время 12.00, то строку необходимо сформировать таким образом:
July 1,2012 12:00
Теперь давайте приведу часть кода функции для дальнейших пояснений:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//функция вызова таймера 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()):
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
//Проверяем не нужно ли закончить отсчет //если дата отсчета еще не истекла, то количество //миллисекунд в переменной 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("<span id='stop'>Отсчет закончен!!!</span>"); } |
Итак, для начала сделаем небольшую проверку, но то, не закончен ли отсчет. Если количество миллисекунд в переменной 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 – количество секунд в одной минуте.
Итак, в принципе таймер у нас готов осталось красиво его вывести на экран и периодически вызывать созданную нами функцию. Но перед этим давайте себя проверим и выведем на экран то что у нас получилось. Для этого вставим в функцию код (ниже после расчета секунд):
|
1 |
alert(day + " : " + hour + " : " + min + " : " + sec); |
Затем после кода функции вызовем ее на исполнение:
|
1 2 |
//Вызываем функцию на исполнение get_timer(); |
И теперь, задав любое время для отсчета таймера, переходим в браузер и обновим нашу страничку. Как Вы видите, появилась надпись с временем которое остается до указанной даты отсчета.
4. Выводим таймер на экран.
Но, конечно, сейчас наш таймер не работает, так как он не считает время. Вернее считает, но делает всего один замер времени за один вызов функции. Поэтому давайте это исправим, а заодно красиво выведем наш таймер на экран (код с функцией alert(), можно удалить, либо закомментировать):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
//Выводим дни //Проверяем какие предыдущие цифры времени должны вывестись на экран //Для десятков дней 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).
Далее для часов и дней все по аналогии, просто добавляем проверку предыдущего числа, которое должно вывестись на экране. Конечно, немного запутано по началу, для восприятия, но здесь ничего сложного нет просто обычные манипуляции с числами.
Теперь приведу код функции, которая выводит на экран элементы таймера при помощи анимации:
|
1 2 3 4 5 6 |
//Функция для красивого отображения времени. function animation(vibor,param) { vibor.html(param) .css({'marginTop':'-20px','opacity':'0'}) .animate({'marginTop':'0px','opacity':'1'}); } |
Первым делом обратите внимание на параметры, которые необходимо передавать этой функции. Первый параметр — это обычная выборка jQuery, к примеру $(«#min0»). Второй параметр — это данные, которые мы вставляем в выбранный блок (а выборка у нас передается в переменную vibor). Затем мы пишем выборку (сохраненную в переменной vibor), далее вызываем метод html() – которому передаем параметром переменную param (а в ней сохранены данные для вставки). Затем вызываем метод css() с помощью которого задаем стили для нашей выборки. То есть мы немного поднимаем выбранный блок вверх, при помощи правила marginTop (обратите внимание как в этом методе записываются правила состоящие из двух слов), со значением в -20px и задаем полную прозрачность выбранного блока, то есть как бы скрываем данный блок. Далее вызываем метод animate(), который дает возможность нам, создавать пользовательскую анимацию опираясь на правила css, которые мы ему передаем. К примеру, если у блока ширина 100px и методу animate() мы передаем правило для ширины равное 300px. То на экране мы увидим плавное увеличение ширины блока до 300px.
Методу animate() мы передаем правила css, которые будут опускать выборку на свое обычное местоположение, а также убирать прозрачность в блоке с выборкой.
Итак, если обновить браузер, то на экране будет выведен вот такой вот таймер обратного отсчета.
Как мне кажется, таймер получился довольно неплохой и красивый.
Итак, на этом работа над таймером у нас закончена. Таймер получился полностью работоспособным и современным.
Если возникнут вопросы — пишите, постараемся на них ответить. Всего доброго! Удачного Вам кодирования и до новых встреч!!!
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть
Комментарии (57)