您所做的一些事情会阻止您扩展代码。如果您想要一个可重用的计时器，则不能硬设置它将使用的变量。因此，第一件事是删除顶部的三个变量并在函数范围内重新创建它们。
这样，每次调用该函数时，都会为其执行创建一组新的变量。
分钟和秒可能最好作为参数传递，并且间隔应该在函数范围内定义。
其次，您在内联和脚本内设置点击处理程序。摆脱其中之一（最好摆脱内联版本）。
然后，您有一个计时器变量作为单击处理程序和 setInterval 的参数，但从未使用过。该变量将被设置为事件处理程序上的单击事件（并且再次未使用），并且在 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 在评论中指出。
