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

输入关于已用时间的开关语句。

对于每个指定的间隔，设置有问题的div，并取消设置其他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;
}

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

1 个答案: