php - 使用具有不同间隔的 JavaScript 计时器更改 div 样式

Question

目前我有以下代码创建计时器:

<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 来选择正确的代码(虽然效率低下，但可能是最简单的)。

大家有什么想法吗？

Answer 1

放入关于耗时的 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;
}