Nickolay.info. JavaScript. Таймер обратного отсчёта

Заметка и скрипт появились, как это часто бывает, очень быстро и в процессе работы. Решить задачу организации с помощью Javascript секундомера или таймера с обратным отсчётом времени предельно просто. Сначала создадим элемент HTML, куда будем писать время, например, обычный <span>, а идентификатор у него будет clock1:

<div align="center">
<p>&nbsp;<span id="clock1" style="width:450px; font-size:10px"></span>&nbsp;</p>
</div>

Абзац с жёстким пробелом &nbsp; нужен, чтобы код страницы не "скакал" при заполнении элемента <span> непустым содержимым.

Теперь реализуем код на Javascript, включив туда минимум нужных функций:

<script type="text/javascript">
<!--
 var hour0=0; 
 var min0=0;
 var sec0=0;
 var timeId=null;
 
 function form2 (v) { return (v<10?'0'+v:v); }
 
 function changetime() {
  sec0--;
  if (sec0<0) {
   sec0=59;
   min0--;
   if (min0<0) {
    min0=59;
    if (hour0>0) hour0--;
    else { hour0=min0=sec0=0; }
   }
  }
 }
 
 function showtime () {
  var t=hour0*3600+min0*60+sec0;
  if (t>0) {
   document.getElementById('clock1').innerHTML = form2(hour0)+':'+form2(min0)+':'+form2(sec0);
   changetime();
   window.setTimeout("showtime();",1000);
  }
  else if (t<1) {
   document.getElementById('clock1').innerHTML = '';
   window.clearTimeout (timeId);
  }
 }
 
 function inittime (hour,min,sec) {
  hour0=Math.max(hour,0); min0=Math.max(min,0); sec0=Math.max(sec,0);
  timeId=window.setTimeout("showtime();",1000);
 }
// -->
</script>

Осталось из нужного места документа вызвать в таком же теге <script> функцию inittime, передав ей нужное количество часов, минут и секунд, например, 

inittime (50,0,0);

для 50 часов.

После истечения времени наш скрипт просто перестанет что-либо делать, если в это время нужна какая-то работа - добавьте, например, редирект на нужную страницу в ветку алгоритма 

  else if (t<1) {
   document.getElementById('clock1').innerHTML = '';
   window.clearTimeout (timeId);
   //сюда!
   document.location.href='http://nickolay.info';
  }

Это тоже сработает во всех основных браузерах.

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

Естественно, никто не мешает нам сделать форму, в которой будет задаваться нужное скрипту число часов, минут и секунд, в простейшем случае вот такую (здесь форма тоже сгенерирована не без помощи Javascript, лень писать такие списки "вручную"):

<script type="text/javascript">
 function generate_list (name,min,step,max,deft) {
  document.writeln ('<select name="'+name+'" size="1">');
  for (var i=min; i<=max; i+=step) {
   document.write ('<option value="'+i+'"');
   if (i==deft) { document.write (' selected'); }
   document.writeln ('>'+(i<10?'0'+i:i)+'</option>');
  }
  document.writeln ('</select>');
 }
</script>
 
<div align="center">
 <form name="f1">
  <table align="center" width="90%" border="0" cellpadding="4" cellspacing="0"><tr>
   <td>Часы:&nbsp;<script type="text/javascript">generate_list ('hour0',0,1,50,1);</script></td>
   <td>Минуты:&nbsp;<script type="text/javascript">generate_list ('min0',0,1,59,0);</script></td>
   <td>Секунды:&nbsp;<script type="text/javascript">generate_list ('sec0',0,1,59,0);</script></td>
   <td><input type="button" value="Отсчёт" 
    onclick="inittime(
     document.f1.hour0.options[document.f1.hour0.selectedIndex].value,
     document.f1.min0.options[document.f1.min0.selectedIndex].value,
     document.f1.sec0.options[document.f1.sec0.selectedIndex].value);"></td>
  </tr></table>
 </form>
</div>

Метод generate_list (name,min,step,max,deft) можно использовать для программной генерации любых списков. Как легко заметить по коду, name - это имя списка, min,step,max - минимальное значение, шаг и максимальное значение, deft - выбранное по умолчанию значение.

Придётся видимо, также заменить вызов setTimeout на setInterval, ведь теперь можно запускать новый счётчик во время работы текущего, соответственно, мы хотим сбросить "старый" счётчик времени и избежать его наложения на "новый" (мы используем всюду одну и ту же переменную timeId). Был и альтернативный путь - массив счётчиков времени, как, например, в исходниках скрипта Clicker. Новый код функций showtime и inittime будет таким:

function showtime () {
  var t=hour0*3600+min0*60+sec0;
  if (t>0) {
   document.getElementById('clock1').innerHTML = form2(hour0)+':'+form2(min0)+':'+form2(sec0);
   changetime();
  }
  else if (t<1) {
   document.getElementById('clock1').innerHTML = '';
   window.clearTimeout (timeId);
   timeId=null;
  }
 }
 
 function inittime (hour,min,sec) {
  if (timeId) { 
   window.clearTimeout (timeId);
   timeId=null;
  }
  hour0=Math.max(hour,0); min0=Math.max(min,0); sec0=Math.max(sec,0);
  if (!timeId) { 
   timeId=window.setInterval("showtime();",1000);
  }
 }

Вот что получилось в итоге, это и скрипт в работе:

 

Часы:  Минуты:  Секунды: 

P.S. Впрочем, искусственно хранить время как часы, минуты и секунды вовсе необязательно. Можно всюду использовать миллисекунды. Кроме того, к коду легко добавить массив идентификаторов TimeoutID вместо единственного timeId и массив временных меток в миллисекундах (Timeout в коде ниже), что даст произвольное количество одновременно идущих счётчиков на странице. Ниже приводится полный листинг файла с примером, только здесь я не ввожу время из форм, а получаю его программно, запустив i-ый счётчик на i минут всё тем же методом inittime (теперь к нему добавлен параметр-номер счётчика). Перед этим не забываем создать абзацы с атрибутами id clock1, ..., clock10 - должен же скрипт куда-то писать время! Разумеется, можно переделать код так, чтобы писалось тоже в формы - на сайте достаточно примеров.

Ещё раз уточню, что если хотите, чтобы таймеры "жили" после обновления страницы - применяйте куки, в этой статье - работающий в любом браузере код для них. 

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Массив таймеров</title>
 
<script type="text/javascript">
 var size=10; //число таймеров
 var TimeoutID=new Array (size); //Массив ID таймеров
 var Timeout=new Array (size); //Массив времени таймеров
 
 function form2 (v) { return (v<10?'0'+v:v); }
 
 function showtime (n) {
  var t=Timeout[n]/1000;
  if (t>0) {
   sec0=t%60; t-=sec0;
   min0=(t%3600)/60; t-=min0*60;
   hour0=t/3600;
   document.getElementById('clock'+n).innerHTML = 
    form2(hour0)+':'+form2(min0)+':'+form2(sec0);
   Timeout[n]-=1000;
   window.setTimeout('showtime('+n+');',1000);
  }
  else if (t<1) {
   document.getElementById('clock'+n).innerHTML = '';
   //Убрать строку выше - счётчик не будет исчезать
   window.clearTimeout (TimeoutID[n]);
   //Обработку по истечении времени ставить сюда
  }
 }
 
 function inittime (n,hour,min,sec) { 
  //Номер таймера, число часов, минут, секунд работы
  hour0=Math.max(hour,0); min0=Math.max(min,0); sec0=Math.max(sec,0);
  var t=(hour*3600+min*60+sec)*1000;
  if (t>0) {
   TimeoutID[n]=window.setTimeout('showtime('+n+')', 1000);
   Timeout[n]=t;
  }
 }
</script>
 
</head><body>
 
<div align="center">
<script type="text/javascript">
 for (i=0; i<size; i++) {
  //Создаём программно 10 таймеров и ставим их от 1 до 10 минут
  document.writeln ('<p>&nbsp;<span id="clock'+i+
   '" style="width:450px; font-size:10px"></span>&nbsp;</p>');
  inittime (i,0,i,0);
 }
</script>
 
</body></html>

Рейтинг@Mail.ru

вверх гостевая; E-mail