В настоящее время у меня есть следующий код, создающий мой таймер:
<script type="text/javascript"> var interval; var minutes = 8; var seconds = 10; function countdown(element) { interval = setInterval(function() { var el = document.getElementById(element); if(seconds == 0) { if(minutes == 0) { alert(el.innerHTML = "countdown's over!"); clearInterval(interval); return; } else { minutes--; seconds = 60; } } if(minutes > 0) { var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute'); } else { var minute_text = ''; } var second_text = seconds > 1 ? 'seconds' : 'second'; el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining'; seconds--; }, 1000); } </script> И я использую следующие кнопки, чтобы вызвать его:
<input type="button" onclick="countdown('countdown');" value="Start" /> <input type="button" onclick="clearInterval(interval);" value="Pause" />
Как я могу отслеживать таймер и изменять стили страниц с течением времени?
Например, когда я нажимаю кнопку «Пуск», я хочу выделить один div, через 5 секунд я хочу выделить еще один div и высвечивать первый, через 20 секунд после этого хочу снова изменить выделение, через 10 секунд я снова меняю подсветку, и так далее.
Интервалы должны быть в разное время, но большинство случаев будут следовать шаблону выше (0, 5, 5, 20, 10, 20, 10, 20, 10 …), так что это хорошее место для начала. Общая длина таймера всегда составляет 8 минут, поэтому интервалы могут быть жестко закодированы, и я мог бы использовать PHP для выбора правильного кода (хотя и неэффективного, возможно, самого простого).
У кого-нибудь есть идеи?
Положите оператор switch на прошедшее время.
Для каждого заданного интервала задайте соответствующий div и отмените остальные.
//at the beginning of the script var origtime = minutes*60+seconds; //...snip to countdown function var timeleft = minutes*60+seconds; switch(origtime - timeleft) { case 0: highlightfirstdiv(); break; case 5: highlightseconddiv(); break; case 10: highlightthirddiv(); break; ... case x: highlightfinaldiv(); break; }