| karabawka |
Дата: Суббота, 26.01.2013, 22:31 | Сообщение # 1
|
Главный предприниматель
Сообщений: 1121
Статус: Offline
|
Всем привет. Урок конечно не совсем по теме раздела, т.к. здесь изучают в основном вещи исключительно из области HTML. Но к сожалению разделов нету для уроков по созданию скриптов JS. Для начала скину весь код для лентяев.
Код <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); 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++) { document.writeln ('<p> <span id="clock'+i+ '" style="width:450px; font-size:10px"></span> </p>'); inittime (i,0,i,0); } </script> </body></html>
Теперь давайте разбирать код.
Начинаем страничку, задаем кодировку.
Код <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Массив таймеров</title>
Начинаем сам скрипт. Объявляем переменные.
var size=10 - число таймеров, которые будут у нас.
var timeoutID=new Array (size); - массив id таймеров
var timeout=new Array (size); - массив времени таймеров.
Код <script type="text/javascript">
var size=10;
var TimeoutID=new Array (size);
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>
Завершаем код, выравниваем таймер по центру, создаем программно 10 таймеров и ставим их от 1 до 10 минут.
Код <div align="center"> <script type="text/javascript"> for (i=0; i<size; i++) { document.writeln ('<p> <span id="clock'+i+ '" style="width:450px; font-size:10px"></span> </p>'); inittime (i,0,i,0); } </script> </body></html>
Искусственно хранить время как часы, минуты и секунды вовсе необязательно. Можно всюду использовать миллисекунды.
И кстати, это по сути самый простой пример, таймер не будет работать после того как страницу обновишь. Если хотите, чтобы таймеры "жили" после обновления страницы - применяйте куки. В этой статье все подробно написано : http://pers.narod.ru/jscript/js_onunload.html
Автор не я, я немножко урезал урок, убрал добавления, которые могли бы запутать мозги новичка, в принципе урок нужен для практического разбора сркипта, или же для того чтобы кто-нибудь использовал его на своем проекте. Всем удачи в изучении)
Сообщение отредактировал karabawka - Пятница, 26.04.2013, 21:53 |
|
|
|
|
