Десять, девять, ... два, один, старт! Именно так нам кажется должен осуществляться обратный отсчет, о котором я вам и расскажу сегодня. Так вот, на сайте где-нибудь, и для чего-нибудь в обязательном порядке нужен обратный отсчет, дабы информировать посетителя о каком-то событии, будь то распродажа или ее завершение. Если вам необходимо внедрить в ваш сайт такую форму отсчета, то это легко сделать с помощью небольшого Ява скрипта.
Сама по себе форма будет выглядеть примерно вот так. Хотя сразу надо сказать, что форма оформляется с помощью применения стилей, поэтому выглядеть может совсем иначе. То есть вы можете задать любой шрифт, любой цвет, любой размер. Это уж как вам надо.
Пример 1Собственно теперь и осталось как привести сам скрипт обратного отсчета на Ява. Посмотреть и скачать его можно
Код обратного отсчета.Само собой код можно в известном и допустимом объеме отредактировать. Это как я уже сказал все зависит от ваших потребностей.
Также хотелось сказать и о том, что данный скрипт в своем коде использует обращение к конкретной дате, что является плюсом и минусом. Это в зависимости от того, что вам надо.
Если отсчет действительно будет ориентироваться на нужную нам дату и выдавать время относительно нее, то это плюс. Однако если нам необходимо просто отсчет времени, скажем пребывания на странице, то можно генерировать значение времени с помощью периодичного вызова функции и подмены переменной. Смотрим.
Пример 2
Код времени пребывания на странице
Пока на этом можно остановиться, не забывая о том, что вариаций отсчета времени даже с применение этих двух вариантов можно реализовывать великое множество. Возможно вы придумаете и еще что-то!
Пример 3По точно такому же принципу можно сделать и обратный отсчет, то есть не прибегая к специализированному оператору new Date().getTime()
Код обратного отсчета на 20 минут.Пример 4
Еще один вариант отсчета на 1 минуту, но его прелесть в том, что он уже выполнен в купе с CSS, то есть JS сам по себе работает и CSS сам по себе. Но вместе они дают такой динамический эффект. Единственное в самом конце JS вмешивается в CSS и обрубает количество бесконечных циклов анимации, чтобы по окончании времени не было лишнего "мильтишения:)".
Код обратного отсчета на 1 минуту с элементами CSS.