Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Скрипт: Таймер обратного отсчета.

Автор: Андрей Краснокутский

Дата: 2011-02-19

До наступления часа Х осталось ... ... ...

Наверное Вы уже видели на разных сайтах обратный отсчет до наступления какого-то события. Например: До окончания скидочной акции осталось ХХ : ХХ : ХХ, соответственно Вы видели вместо ХХ : ХХ : ХХ электронные часы, которые отсчитывают время в обратной последовательности. Я например такой скрипт использовал для отсчета времени До наступления Нового года осталось ХХ дней, ХХ часов, ХХ минут.

После наступления часа Х, в данном случае Нового года, обратный отсчет прекращается и выводится другая надпись, в данном случая я выводил: С Наступившим Новым Годом !!!

В принципе какое событие наступит совсем не важно, скрипт можно настроить на абсолютно любую дату. По окончании обратного отсчета, в выводимой надписи тоже можно настроить абсолютно любой текст.

Скачайте себе на компьютер скрипт таймера обратного отсчета (размер файла 1,5 Кб)

Скрипт очень простой. Вам нужно будет настроить всего два параметра:

  1. дату остчета;
  2. надпись, которую Вы хотите, чтобы выводилась по окончании отсчета (по наступлению этой даты).

Извлеките файлы из архива. Внутри скачанного архива находятся два файла: файл со скриптом countdown.js и файл с примером работы скрипта index.html к нему подключен скрипт (файл дан для примера).

Запустите index.html файл и посмотрите как работает скрипт.

Для подключения таймера обратного отсчета к своему сайту, Вам нужно отредактировать файл countdown.js. Откройте это файл в стандартном Блокноте из состава ОС Windows, а еще лучше откройте файл countdown.js с помощью текстового редактора Notepad++ .

Отредактируйте текстовую надпись в строке:

var eventstr = "С Наступившим Новым 2012 Годом !!!"; //Эта строка выводиться по окончанию отсчета

В редакторе Notepad++ это 3 строка (здесь строки нумеруются). Редактируйте то, что находится в кавычках "...." в данном случае это текст С Наступившим Новым 2012 Годом !!! Будьте внимательны: Кавычки " " должны остаться!

 

Следующая строка для редактирования находится в конце файла countdown.js :

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

В редакторе Notepad++ это 53 строка. Здесь Вы редактируете текстовую надпись, которая выводится перед таймером отсчета, до наступления события Х. В данном случае: До Нового Года Осталось. Будьте внимательны: Кавычки " " должны остаться!

 

Последняя строка для редактирования находится в самом конце файла countdown.js :

CountDowndmn(2012,01,01); //Дата отсчета: год, месяц, число

В редакторе Notepad++ это 60 строка, самая последняя.

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

Всё, сохраняете файл countdown.js, и закачиваете в ту папку на сервере, в которой у Вас лежит(ат) файлы, на которых Вы планируете выводить таймер обратного отсчета. Обычно это корневая папка сайта public_html , но возможно Вы хотите разместить таймер и в других папках, Вам виднее.

 

Дальше работаете (редактируете) с теми файлами сайта, на которых будет выводится таймер, давайте для простоты будем считать что это файл index.html , как в архиве со скриптом.

В нужном месте файла index.html (в котором Вы хотите вывести таймер) нужно добавить две строчки кода:

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

Первая строчка даёт команду на вывод таймера, а вторая подключает скрипт. Если что-то не понятно откройте в текстовом редакторе файлы из архива и посмотрите код.

Всё, сохраняйте файл index.html и проверяйте. Если всё сделали правильно, то в нужном месте Вы увидите обратный отсчет, обновляйте (закачивайте) на сервер.

Замечу, что подключить таймер обратного отсчета можно к неограниченному количеству web-страниц.

Используя стили CSS (каскадную таблицу стилей) текстовым надписям и таймеру можно придать любой внешний вид изменив вид, текста и цифр, размер, цвет и т.д.

Скачать скрипт таймера обратного отсчета (размер файла 1,5 Кб)

 

Всего Вам доброго.

 

Читайте так же:

Что такое Cron и как с ним работать?

Как сделать Скришнот (снимок) с экрана монитора нужного размера?

Что прибыльнее: Сайт или Блог? Что приносит больший доход?

Как заработать в Партнерских Программах. Пять 100-процентных рекомендаций.

Форматы изображений для сайта.

Как за 9 часов и 45 минут Самостоятельно Сделать свой Сайт?

 

Просмотров: 60994


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Олег Гузь
Дата: 2011-02-20

Проверил! И этот скрипт тоже работает!Все отлично, Андрей! Спасибо тебе большое! Очень хорошо, что ты стал предлагать скрипты! Может еще что-нибудь интересного предложишь?

Комментарии добавил(а): Олег Гузь
Дата: 2011-02-20

Кстати, из всех трех скриптов, этот - самый полезный!

Комментарии добавил(а): Серёга
Дата: 2011-03-21

Спасибо огромное! Вот только есть один вопрос, как менять размеры самого таймера?

Комментарии добавил(а): АндрейК
Дата: 2011-03-21

Серега, Вы не внимательно изучили этот урок: "Используя стили CSS (каскадную таблицу стилей) текстовым надписям и таймеру можно придать любой внешний вид изменив вид, текста и цифр, размер, цвет и т.д."

Комментарии добавил(а): Asa
Дата: 2011-04-07

Неправильно склоняет числительные: 12 секунды, 13 секунды, 14 секунды.

Комментарии добавил(а): Radioactive
Дата: 2011-04-12

Asa: неужели это так мешает?

Комментарии добавил(а): Sanchez
Дата: 2011-07-10

Подскажите, вот я всё выполнил по вашей инструкции, поставил счётчик, он у меня работает, но отображает только цифры и латинские буквы, а кириллицу (русский текст) отображает в виде нераспознанных символов (квадратики). Что делать?

Комментарии добавил(а): АндрейК
Дата: 2011-07-10

Если у Вас не верно распознаются символы русского алфавита, значит не правильно отображается кодировка на web-странице или в браузере. На web- странице четко пропишите кодировку windows-1251 и проверьте что установлено в браузере по умолчанию

Комментарии добавил(а): Адильжан
Дата: 2011-07-28

У меня такая же проблема как и у Sanchezа я изменил кодировку в браузере и абсолютно все стало в символах

Комментарии добавил(а): АндрейК
Дата: 2011-07-29

Уважаемые повторюсь еще раз: Если у Вас не верно распознаются символы русского алфавита, значит не правильно отображается кодировка на web-странице или в браузере. На web- странице четко пропишите кодировку windows-1251 и проверьте что установлено в браузере по умолчанию

Комментарии добавил(а): София
Дата: 2011-08-12

Пыталась преобразовать этот код, чтобы он отображал только дни, но ничего не получилось: счетчик не показывается совсем. Это можно как-то сделать, или нужен другой код?

Комментарии добавил(а): Артем
Дата: 2011-09-07

Как сделать так, чтобы только цифры отображались?

Комментарии добавил(а): АндрейК
Дата: 2011-09-07

Очень просто, удалите текст из кода

Комментарии добавил(а): Артемий
Дата: 2011-09-11

а можно ли сделать вывод времени не до дня, а до минут? допустим нужно чтобы показывал отсчет до 17:25 20 октября 2011 или для этого надо уже другой скрипт делать? если да, то можете сделать такой или нет?=_=

Комментарии добавил(а): артем
Дата: 2011-11-06

Мне тоже такой нужен

Комментарии добавил(а): Cruel
Дата: 2012-01-03

Можно ли сделать 3 таймера сразу,и как ? А то когда я добавляю 3таймера , только один ведет отсчет ,а два просто стоят на месте .

Комментарии добавил(а): Шамиль
Дата: 2012-03-06

Подскажите как мне подключить SCC чтобы поменять его размер, шрифт и тд

Комментарии добавил(а): Александр
Дата: 2012-04-28

Можно ли сделать отсчет на фоне изображения и как это сделать? Или в текст вставить изображение я побывал у меня не вышло(

Комментарии добавил(а): Сергей
Дата: 2012-07-16

а можно ли сделать вывод времени не до дня, а до минут? допустим нужно чтобы показывал отсчет до 17:25 20 октября 2011 или для этого надо уже другой скрипт делать? Скажите какие строки нужно добавить? Спасибо

Комментарии добавил(а): Игорь
Дата: 2012-08-25

Скажите, а есть возможность увеличения шрифта

Комментарии добавил(а): Шамиль
Дата: 2012-11-02

Скажите пож. Как сделать такой же таймер но только чтобы он начинал отсчет именно тогда когда человек перейдет на страницу с таймеров а не вообще. Есть ли такой скрипт как его сделать технически?

Комментарии добавил(а): Валентина
Дата: 2013-02-13

Андрей, выражаю Вам огромную благодарность за этот урок по установке таймера. Всё сразу получилось с первого раза!

Комментарии добавил(а): Юрий
Дата: 2013-03-30

Меня тоже интересует возможность работы 3х-6ти счетчиков на одной странице одновремеено. Не подскажите как это реализовать (из 3-х работает только один)

Комментарии добавил(а): Андрей
Дата: 2013-05-29

Нужно доработать что бы неограниченное кол-во скриптов работало на одной станице

Комментарии добавил(а): Виктория Крам
Дата: 2013-12-10

Спасибо, нужная информация!

Комментарии добавил(а): Макс
Дата: 2014-10-17

Вот нарыл онлайн таймер для сайта - e-timer.ru. Настраиваешь прямо в режиме онлайн и затем копируешь код себе на сайт и у тебя появляется такой же. Дело пяти минут, а такая красота теперь на сайте!))

Комментарии добавил(а): Владимир
Дата: 2014-04-05

Отличный скрипт. Просто и со вкусом.

Комментарии добавил(а): Эльвира
Дата: 2014-10-22

ВсВашем индексе только надпись "С наступившим Новым годом" и все

Комментарии добавил(а): ирка
Дата: 2015-01-02

мне нравится

Комментарии добавил(а): Олегъ
Дата: 2015-06-10

Большой СПС за скриптик, это хорошо, успехов автору в подобном скриптонаписании.))

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Видео Курс по созданию
Информационного Бизнеса в Интернете
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT