使用具有不同间隔的 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;
}