САЙТОСТРОИТЕЛЬ

Бесплатная рассылки для начинающих сайтостроителей.

  • Вводный курс для новичков - сайтостроителей.

  • Готовые рецепты сайтостроителя

  • Бесплатные уроки и многое другое.

Введи свое имя и е-мейл в форму ниже, нажми ПОДПИСАТЬСЯ и получай всю нужную информацию прямо в свой почтовый ящик.

Ваше имя :
Ваш email :








ГОТОВЫЕ РЕЦЕПТЫ САЙТОСТРОИТЕЛЯ.

Как сделать таймер обратного отсчет на сайте.

Дата публикации: 28 декабря 2009

Я думаю, Вы видели такую штуку, когда на сайте идет обратный отсчет до какого-то определенного события.  Я установила такой таймер обратного отсчета у себя в Новогодней шкатулке. Он считает время, оставшееся до Нового года. Сегодня мы с Вами научимся использовать его на своем сайте.

Это задача реализуется с помощью специального скрипта. Он считает время, оставшееся до определенной даты, с точностью до секунды. С наступлением этой самой даты скрипт выводит определенную, заложенную в него надпись, например "С Новым Годом!". Текущее время он берет из настроек системы посетителя сайта. То есть каждый посетитель Вашего сайта будет видеть оставшееся время, которое соответствует настройкам часов (часового пояса) в его компьютере. И продолжая наш пример, для Вашего посетителя поздравление с Новым Годом появится именно в тот момент, когда Новый  Год наступит у НЕГО.

Итак, допустим мы хотим установить таймер обратного отсчета до Нового Года 2012 (то есть до 1 января 2012). Вот так это будет выглядеть на нашем сайте.

Скачайте себе скрипт таймера обратного отсчета (размер файла 1.3 Кб, скачено: 12664 раз).

Этот скрипт очень простой. И Вам будет необходимо настроить в нем всего два параметра: дату отсчета и ту надпись, которую Вы хотите, чтобы выводил скрипт по наступлению этой даты.

Внутри скаченного архива находится файл со скриптом - countdown.js - и файл с примером страницы, к которой подключен этот скрипт - index.html. Извлеките файлы из архива. Для редактирования файла-скрипта используйте БЛОКНОТ (текстовый редактор, который входит в состав операционной системы Windows.) Чтобы открыть этот файл в БЛОКНОТЕ, кликните по нему правой кнопкой мышки и в появившемся контекстном меню выберете пункт ОТКРЫТЬ с ПОМОЩЬЮ - БЛОКНОТ.

Первая строчка, которую нужно отредактировать, находится в самом начале файла. Вот так она выглядит:

var eventstr = "C новым годом!!!"; //Эта строка выводиться по окончанию отсчета
 
То, что необходимо отредактировать, я выделила жирным. Соответственно, если Вы хотите, чтобы вместо поздравления с НОВЫМ ГОДОМ скрипт выдавал что-то другое, указывайте это здесь. Вы можете включить сюда теги форматирования текста, если нужно (выделить цветом, сделать жирным и т.д.)

Вторая строчка с датой отсчета находится в самом конце файла.

CountDowndmn(2010,1,1); //Дата отсчета

Здесь Вам нужно указать дату Х, до которой Вы будете вести обратный отсчет в формате ГОД, МЕСЯЦ, ДЕНЬ.

Еще один фрагмент скрипта, который, возможно, потребуется отредактировать, находится также в конце файла, чуть выше даты отсчета. Вот он:

countdownid.innerHTML="ДО НОВОГО ГОДА осталось: <br> "+dday+ " " +ddaystr+", "+dhour+" "+dhourstr+", "+dmin+" "+dminstr+" и "+dsec+" "+dsecstr;

То, что, возможно, нужно будет отредактировать, я выделила жирным (на тот случай, если Вы будете вести отсчет НЕ до НОВОГО ГОДА). Вы можете включить сюда теги форматирования текста, если нужно (выделить цветом, сделать жирным, перенос строки и т.д.)

Сохраняем файл, выкладываем его в ту директорию, где лежит страница вашего сайта, на которой Вы хотите видеть таймер. То есть файл скрипта и файл страницы, где будет таймер, должны лежать в одной директории.

Дальше работаем с той страницей Вашего сайта, где бы Вы хотели поместить таймер.

В нужном месте в коде вашей страницы Вам нужно поместить вот такие 2 строчки:

<DIV align="center" ID="countdown"></DIV>
<SCRIPT src="countdown.js" type="text/javascript" language="javascript"></SCRIPT>


Первая строчка дает команду на вывод таймера, а вторая подключает скрипт. В качестве образца смотрите файл index.html, который я приложила к скрипту.

Все! Проверяем результат. (Будет работать на вашем локальном компьютере). Если Вы все сделали правильно, то в нужном месте страницы Вашего сайта Вы увидите обратный отсчет.

Удачи Вам!

С уважением,
Ольга Александрова
Автор курса по основам создания сайтов "Что нам стоит сайт построить"