新的解決方案，至極允許創建不同的定時器和跟蹤他們：
//a method to setup a new timer
function Timer(Name){
this.timeElement=document.createElement("div");
(this.stopButton=document.createElement("button")).innerHTML="STOP";
(this.startButton=document.createElement("button")).innerHTML="START";
(this.Name=document.createElement("h1")).innerHTML=Name;
[this.Name,this.timeElement,this.startButton,this.stopButton].forEach(el=>document.body.appendChild(el));
this.stopButton.addEventListener("click",this.stop.bind(this));
this.startButton.addEventListener("click",this.start.bind(this));
this.seconds=0;
this.minutes=0;
}
Timer.prototype={
update:function() {
this.seconds++;
if(this.seconds > 59) {
this.seconds=0;
this.minutes++;
}
var secTemp="00"+this.seconds, minTemp="00"+this.minutes;
this.timeElement.innerHTML=minTemp.slice(minTemp.length-2)+":"+secTemp.slice(secTemp.length-2);
},
stop:function(){
if(this.interval) clearInterval(this.interval);
this.running=false;
if(this.onstop) this.onstop(this);
}
start:function(){
if(this.interval) clearInterval(this.interval);
this.interval = setInterval(this.update.bind(this), 1000);
this.running=true;
if(this.onstart) this.onstart(this);
}
};
這實現了與OOP的計時器。所以你可以創建多個定時器，它們不會互相影響。
您可以創建這樣一個計時器：
var timer= new Timer("The Name");
你也可以改變事件，設置/讀取的時間，並檢查是否正在運行：如果你想等待多個定時器
timer.start();//start the timer (can also be done with the ui button)
timer.stop();
timer.onstart=()=>alert("Started!");
timer.onstop=()=>alert("Stopped!");
console.log(timer.running,timer.minutes,timer.seconds);
並計算平均值，如果所有的人都停止了：
var timers=["Timer 1", "Timer 2"].map(name=>new Timer(name));//create two timers and store in array
timers.forEach(function(timer){
timer.running=true;
timer.onstop=function(){
if(timers.some(t=>t.running)) return;//if theres a running timer dont procceed
var seconds=timers.reduce((seconds,timer)=>seconds+=(timer.seconds+timer.minutes*60),0);
var average=seconds/timers.length;
alert("Average: "+average+"s");
};
});
http://jsbin.com/coduvohewu/edit?output
這個老辦法，增加一個計時器，如果新的按鈕被按下，並停止舊的然後：
所以，你要停止當前的定時器，下面創建一個新的？也許你可以重構代碼了一下，做某事是這樣的：
window.onload = function() {
var seconds= 0,minutes = 0;
var times=[];
var Interval;
var timeElement;
//a method to setup a new timer
function createTimer(dontsave){
if(times.length>3) return alert(times.map(el=>el.join(":")).join());
timeElement=document.createElement("div");
document.body.appendChild(timeElement);
if(!dontsave) times.push([minutes,seconds]);
}
createTimer(true);
//a method to let the timer run
function startTimer() {
seconds++;
if(seconds > 59) {
seconds=0;
minutes++;
}
var secTemp="00"+seconds,minTemp="00"+minutes;
timeElement.innerHTML=minTemp.slice(minTemp.length-2)+":"+secTemp.slice(secTemp.length-2);
}
//assign to buttons:
document.getElementById("ButtonStart").onclick= function(){
clearInterval(Interval);
Interval = setInterval(startTimer, 1000);
}
document.getElementById("ButtonNew").onclick=createTimer;
};
http://jsbin.com/mujisaweyo/edit?output
如果你按下一個按鈕，與ID ButtonNew這只是創建DOM中的新的div。所以當前時間保持爲舊元素中的文本，並且在新元素中保持計數。我也添加了一個零填充...
什麼是你的代碼做的，有什麼問題呢？ – 4castle
計劃是爲代碼計時「菜單」和「直到打開」需要多長時間。一旦我有了這個時間，也能夠顯示兩者的平均數以及兩者的平均數。 例如。菜單有10秒，40秒和20秒。直到打開有5秒，10秒和30秒。所以我們可以得到Menu的平均值和Till平均值，但也可以將兩者的平均值放在一起。例如10 + 5s，40 + 10s和20 + 30s。 – user3500310