Приветствую Вас Гость • Регистрация • Вход
Суббота, 19.10.2019
Главная » 2014 » Апрель » 26 » Простой скрипт обратного отсчета времени в секундах
18:33
Простой скрипт обратного отсчета времени в секундах
Обратный отсчет времениЗдравствуйте уважаемые читатели, рад вновь видеть на страницах моего блога от Samosval@
Все Вы уверен не раз замечали при редиректе или же с каких либо иных причин есть таймер обратного отсчета времени на странице.Это придает странице необычный и красивый вид.
Сегодня мы рассмотрим и разберем на примере как правильно организовать самый простой таймер обратного отсчета времени в секундах с помощью средств javascript.
Не знаю может быть эта статья и не вышла бы в свет, если бы самому не пришлось делать обратный отсчет времени для редиректа.Но так или иначе она написана, и сейчас мы будем разбирать все по порядку.
Скрипт может пригодиться на страницах Вашего сайта, с которых происходит автоматический редирект пользователей на какие-то внешние адреса, при этом будет виден обратный отсчет времени в секундах. Или же на странице где выполняется какая-то другая обработка информации или операция с задержкой времени, и есть потребность отобразить обратный отсчет времени.
Сам скрипт довольно прост:
Код
// значение начальной секунды
  var second=10;
  function time()
  {
  if(second<=9)
  {
  second="0" + second;
  }
  if(document.getElementById)
  {
  timer.innerHTML=second;
  }
  if(second==00)
  {
  return false;
  }
  second--;
  setTimeout("time()", 1000);
  }

В первой строке мы зададим начальное значение секунд, от которого идет отсчет до нуля. Далее определяется функция «time», которая с задержкой в одну секунду обращается к самой себе, вычитая из начального значения единицу, и записывая вновь полученное значение во внутрь любого блока с id="timer", например так:
Код
<a href="javascript:time()">ссылка</a>

Или же можно еще и так:
Код
<a href="#" onclick=" time();" >ссылка</a>

Либо же, функцию можно вызвать при загрузке страницы или блока страницы, указав атрибут «onLoad»:
Код
<body onLoad="time();">…</body>

В моем случае у меня скрипт на странице оформлен таким способом:
Код

<body onLoad="time();">
<script language="JavaScript" type="text/javascript">
  // значение начальной секунды
  var second=10;
  function time()
  {
  if(second<=9)
  {
  second="0" + second;
  }
  if(document.getElementById)
  {
  timer.innerHTML=second;
  }
  if(second==00)
  {
  return false;
  }
  second--;
  setTimeout("time()", 1000);
  }
</script>
<?header( 'Refresh: 10; url=http://perviu.ru/' );?>
Через <span id="timer" style="color: #c00;"></span> секунд будет автоматическая переадресация на нужную Вам страничку!<br/>Если по каким то причинам Ваш браузер не поддерживает автоматической переадресации,нажмите на <a href="http://perviu.ru" title"Блог Samosval@">ссылку</a>
</body>

Ну и конечно пример работы, в даном случае подключена только сама функция для отсчета как для наглядного примера без какого либо перенаправления:

Вы будете перенаправлены через секунд.

Не забывайте рассказать о статье друзьям, возможно информация будет полезна и для них.
Всего доброго, до новых встреч.
Категория: Javasсript | Просмотров: 1843 | Добавил: Samosval |Рейтинг: 0.0/0


Всего комментариев: 0
avatar
    Яндекс.Метрика
Сайт создан в системе uCozЯндекс.Метрика