目前正在处理一个页面上需要两个计时器的项目.定时器需要有一个开始按钮,两者都有不同的定时(即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-javascript和https://html5rocks.com/en/tutorials/webperformance/usertimin),感谢@KaiKarver在评论中指出.