javascript – 一页上有多个倒计时器

目前正在处理一个页面上需要两个计时器的项目.定时器需要有一个开始按钮,两者都有不同的定时(即timer1持续10秒,timer2持续20).这是我正在使用的脚本,但我不知道如何复制计时器并让每个计时器独立工作.

是否有人可以轻松地将此脚本更改为两个定时器的功能?

<html>
<head>
<script language="JavaScript" type="text/javascript">
    var interval;
    var minutes = 0;
    var seconds = 10;

    function countdown(element) {
        interval = setInterval(function(timer) {
            var el = document.getElementById(element);
            if(seconds == 0) {
                if(minutes == 0) {
                    (el.innerHTML = "STOP!");     

                    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 ? '' : '';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
            seconds--;
        }, 1000);
    }
var start = document.getElementById('start');

start.onclick = function(timer) {
    if (!interval) {
        countdown('countdown');
    }
}

</script>
</head>

<body>
<div id='countdown'></div>
<input type="button" onclick="countdown('countdown');this.disabled = true;" value="Start" />
</body>
</html>

解决方法:

您正在做的一些事情阻止您扩展代码.如果你想要一个可重复使用的计时器,你不能硬设置它将使用的变量.首先要摆脱顶部的三个变量,并在函数范围内重新创建它们.

这样,每次调用函数时,都会为其执行创建一组新变量.

分钟和秒可能最好作为参数传递,并且间隔应该在函数范围内定义.

其次,您将内置的Click处理程序设置为BOTH并在脚本中.摆脱其中一个(最好摆脱内联版本).

然后,您有一个计时器变量作为click处理程序和setInterval的参数但从未使用过.该变量将被设置为事件处理程序上的click事件(并且再次未被使用),并且将在setInterval上未定义.所以他们真的不应该在那里.

您可能想要了解的一个性能问题是,您每隔一秒就要对计数器执行DOM查找.您应该在开始时为每个函数调用获取一次并缓存它.

那时,你的功能看起来或多或少会像这样

function countdown(element, minutes, seconds) {
    // Fetch the display element
    var el = document.getElementById(element);

    // Set the timer
    var interval = setInterval(function() {
        if(seconds == 0) {
            if(minutes == 0) {
                (el.innerHTML = "STOP!");     

                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 ? '' : '';
        el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
        seconds--;
    }, 1000);
}

你的设置或多或少都是这样的

//Start as many timers as you want

var start1 = document.getElementById('timer1');
var start2 = document.getElementById('timer2');

start1.onclick = function() {
    countdown('countdown1', 0, 15);
}

start2.onclick = function() {
    countdown('countdown2', 0, 10);
}

当然,你需要额外的按钮和计数器

<div id='countdown1'></div>
<div id='countdown2'></div>
<input id="timer1" type="button" value="Start timer 1" />
<input id="timer2" type="button" value="Start timer 2" />

工作示例:http://codepen.io/anon/pen/Jmpcq/?editors=101


注意:对于精确的计时器,setInterval()可能不是一个好的选择,因为不能保证精确的间隔,并且它可能会在一段时间后延迟它跟踪的时间.对于精确时间至关重要的应用,还有其他方法(例如https://sitepoint.com/creating-accurate-timers-in-javascripthttps://html5rocks.com/en/tutorials/webperformance/usertimin),感谢@KaiKarver在评论中指出.

上一篇:使用UTC以小时,分钟,秒为单位获取JavaScript中两个日期之间的时差


下一篇:Javascript向暂停计时器添加暂停选项不起作用