Pers.narod.ru. JavaScript. Таймер обратного отсчёта |
Заметка и скрипт появились, как это часто бывает, очень быстро и в процессе работы. Решить задачу организации с помощью Javascript секундомера или таймера с обратным отсчётом времени предельно просто.
Сначала создадим элемент HTML, куда будем писать время, например, обычный <span>
, а идентификатор у него будет clock1
:
<div align="center"> <p> <span id="clock1" style="width:450px; font-size:10px"></span> </p> </div>
Абзац с жёстким пробелом
нужен, чтобы код страницы не "скакал" при заполнении элемента <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://pers.narod.ru'; }
Это тоже сработает во всех основных браузерах.
Если надо хранить для клиента некое предыдущее время - подгружаем его в вызове 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>Часы: <script type="text/javascript">generate_list ('hour0',0,1,50,1);</script></td> <td>Минуты: <script type="text/javascript">generate_list ('min0',0,1,59,0);</script></td> <td>Секунды: <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> <span id="clock'+i+ '" style="width:450px; font-size:10px"></span> </p>'); inittime (i,0,i,0); } </script> </body></html>
гостевая; E-mail |