我写了一个计时器对象，其作用类似于秒表（单击一次，计时器启动，再次单击并停止，双击并重置）。如果我只激活一个计时器，一切正常。当我激活第二个计时器时，第一个计时器停止工作。当我激活第三个计时器时，第二个计时器停止工作。
我动态创建了每个计时器对象，为每个计时器提供了自己的名称（window [timer1]）。但他们不是独立行事。为了使计时器对象彼此独立运行，我缺少什么？
function Clock() {
this.element = "";
this.minute = 0;
this.toggle = true;
this.active = false;
this.startClock = startClock;
this.stopClock = stopClock;
function startClock() {
minute = this.minute;
element = this.element;
minute = checkTime(minute);
document.getElementById(element).innerHTML = minute;
minute++;
this.minute = minute;
t=setTimeout(function(){startClock()},1000);
this.counter = t;
}
function checkTime(i) {
if (i<10)
{
i="0" + i;
}
return i;
}
function stopClock() {
document.getElementById(element).innerHTML = this.minute;
clearTimeout(t);
}
}
function initClock(ele) {
value = document.getElementById(ele).innerHTML;
if (typeof window[ele] == 'undefined') {
window[ele] = new Clock();
window[ele].element = ele;
}
if (value == "start" || window[ele].active == false) {
window[ele].toggle = true;
} else {window[ele].toggle = false;}
if (window[ele].toggle) {
window[ele].toggle = false;
window[ele].active = true;
if (value == "start") {
window[ele].minute = 0;
}
window[ele].startClock();
}
else {
window[ele].toggle = true;
window[ele].active = false;
window[ele].stopClock();
}
}
function clearClock(ele) {
document.getElementById(ele).innerHTML= "start";
this.element = "";
this.minute;
this.toggle;
this.counter;
}
答案 0 :(得分：7)
您有一些范围问题。 E.g。
function startClock() {
minute = this.minute;
element = this.element;
minute = checkTime(minute);
document.getElementById(element).innerHTML = minute;
minute++;
this.minute = minute;
t=setTimeout(function(){startClock()},1000);
this.counter = t;
}
这会在全局范围内声明minute，element和t，因此每次调用startClock都会覆盖这些值。
以下是重构版本：
function Clock(element) {
this.element = element;
this.minute = 0;
this.toggle = true;
this.active = false;
}
Clock.prototype = {
startClock: function() {
this.minute = this.checkTime(this.minute);
this.element.innerHTML = this.minute;
this.minute++;
var that = this;
this.counter = setTimeout(function(){that.startClock()},1000);
},
checkTime = function(i) {
if (i<10) {
i="0" + i;
}
return i;
},
stopClock: function() {
this.element.innerHTML = this.minute;
clearTimeout(this.counter);
},
clearClock: function() {
this.element.innerHTML= "start";
this.element = "";
this.minute = 0;
this.toggle = true;
this.counter = null;
}
}
function initClock(ele) {
value = document.getElementById(ele).innerHTML;
if (typeof window[ele] == 'undefined') {
window[ele] = new Clock(document.getElementById(ele));
}
if (value == "start" || window[ele].active == false) {
window[ele].toggle = true;
} else {window[ele].toggle = false;}
if (window[ele].toggle) {
window[ele].toggle = false;
window[ele].active = true;
if (value == "start") {
window[ele].minute = 0;
}
window[ele].startClock();
}
else {
window[ele].toggle = true;
window[ele].active = false;
window[ele].stopClock();
}
}
答案 1 :(得分：2)
复活旧帖子（请不要惹我生气）......
我重新设计并提供完整的解决方案，格式化和放大毫秒。
Kudos去：
我使用window.onload变通用 - JQuery用户一定要使用.ready（）API处理程序。
<html>
<head>
<script type="text/javascript">
function Clock(id) {
this.id = id;
this.element = document.getElementById(id);
this.element.innerHTML = "00:00:00.000";
this.timeout = 69; //1 = much cpu usage; 1000 = 1 second; 20-70 seem ok.
this.oStartDate=0;
this.instance=0;
}
Clock.prototype = {
readyFor: function(looping) {
if ( (this.instance == 1) && (looping == true) ) {
return true;
} else if ( (typeof looping == 'undefined') && (this.instance == 0) && (this.element.innerHTML == "00:00:00.000") ){
// Initial Call Validated
this.instance = 1;
looping = true;
this.oStartDate = new Date();
//this.oStartDate.setSeconds(this.oStartDate.getSeconds() - 55);
//this.oStartDate.setMinutes(this.oStartDate.getMinutes() - 59);
//this.oStartDate.setHours(this.oStartDate.getHours() - 23);
return true;
}
// Subsequent calls will fail (not allowing duplicate parallel runs on same start button)
return false;
},
startClock: function(looping) {
if ( this.readyFor(looping) ) {
this.element.innerHTML = this.formatClock();
this.loop = setTimeout( this.startClock.bind(this, true), this.timeout );
}
},
formatClock: function() {
var oNowDate = new Date();
var Milliseconds = (oNowDate.getTime() - this.oStartDate.getTime());
return sprintf("%02d:%02d:%02d.%03d",
(Milliseconds / (1000 * 60 * 60) % 24),
(Milliseconds / (1000 * 60) % 60),
((Milliseconds / 1000) % 60),
((Milliseconds / 1000) % 1)*1000);
},
lapClock: function() {
var mainDiv = document.getElementById(this.id);
var newDiv = document.createElement("div");
newDiv.className="lap";
var newContent = document.createTextNode(this.formatClock());
newDiv.appendChild(newContent);
document.body.insertAfter(newDiv, mainDiv);
},
resetClock: function() {
this.element.innerHTML = "00:00:00.000";
this.oStartDate = 0;
this.instance=0;
this.loop = null;
},
stopClock: function() {
clearTimeout(this.loop);
this.oStartDate = 0;
this.instance=0;
this.loop = null;
}
}
function initClock(id) {
value = document.getElementById(id).innerHTML;
if (typeof window[id] == 'undefined') {
window[id] = new Clock(id);
}
}
window.onload = function() {
initClock("clock1");
initClock("clock2");
initClock("clock3");
}
function sprintf(){var a=/%%|%(\d+\$)?([-+\'#0 ]*)(\*\d+\$|\*|\d+)?(\.(\*\d+\$|\*|\d+))?([scboxXuidfegEG])/g;var b=arguments,c=0,d=b[c++];var e=function(a,b,c,d){if(!c){c=" "}var e=a.length>=b?"":Array(1+b-a.length>>>0).join(c);return d?a+e:e+a};var f=function(a,b,c,d,f,g){var h=d-a.length;if(h>0){if(c||!f){a=e(a,d,g,c)}else{a=a.slice(0,b.length)+e("",h,"0",true)+a.slice(b.length)}}return a};var g=function(a,b,c,d,g,h,i){var j=a>>>0;c=c&&j&&{2:"0b",8:"0",16:"0x"}[b]||"";a=c+e(j.toString(b),h||0,"0",false);return f(a,c,d,g,i)};var h=function(a,b,c,d,e,g){if(d!=null){a=a.slice(0,d)}return f(a,"",b,c,e,g)};var i=function(a,d,i,j,k,l,m){var n;var o;var p;var q;var r;if(a=="%%"){return"%"}var s=false,t="",u=false,v=false,w=" ";var x=i.length;for(var y=0;i&&y<x;y++){switch(i.charAt(y)){case" ":t=" ";break;case"+":t="+";break;case"-":s=true;break;case"'":w=i.charAt(y+1);break;case"0":u=true;break;case"#":v=true;break}}if(!j){j=0}else if(j=="*"){j=+b[c++]}else if(j.charAt(0)=="*"){j=+b[j.slice(1,-1)]}else{j=+j}if(j<0){j=-j;s=true}if(!isFinite(j)){throw new Error("sprintf: (minimum-)width must be finite")}if(!l){l="fFeE".indexOf(m)>-1?6:m=="d"?0:undefined}else if(l=="*"){l=+b[c++]}else if(l.charAt(0)=="*"){l=+b[l.slice(1,-1)]}else{l=+l}r=d?b[d.slice(0,-1)]:b[c++];switch(m){case"s":return h(String(r),s,j,l,u,w);case"c":return h(String.fromCharCode(+r),s,j,l,u);case"b":return g(r,2,v,s,j,l,u);case"o":return g(r,8,v,s,j,l,u);case"x":return g(r,16,v,s,j,l,u);case"X":return g(r,16,v,s,j,l,u).toUpperCase();case"u":return g(r,10,v,s,j,l,u);case"i":case"d":n=+r|0;o=n<0?"-":t;r=o+e(String(Math.abs(n)),l,"0",false);return f(r,o,s,j,u);case"e":case"E":case"f":case"F":case"g":case"G":n=+r;o=n<0?"-":t;p=["toExponential","toFixed","toPrecision"]["efg".indexOf(m.toLowerCase())];q=["toString","toUpperCase"]["eEfFgG".indexOf(m)%2];r=o+Math.abs(n)[p](l);return f(r,o,s,j,u)[q]();default:return a}};return d.replace(a,i)}
if(!document.insertAfter){document.insertAfter=function(a,b){return(b=b.nextSibling)?this.insertBefore(a,b):this.appendChild(a)};if(this.Node){Node.prototype.insertAfter=document.insertAfter}}
</script>
<style type="text/css">
body, html{font:1em normal monospace;}
div.lap{float:left;background:#fca;padding:0 0.75em;}
div.fl{float:left;}
div.clock{background:#009;color:#eec;padding:0 0.75em;}
div.cl{clear:both;}
</style>
</head>
<body>
<div class="fl"><input type="button" onclick="window['clock1'].startClock();" value="start"><input type="button" onclick="window['clock1'].lapClock();" value="lap"><input type="button" onclick="window['clock1'].stopClock();" value="stop"><input type="button" onclick="window['clock1'].resetClock();" value="reset"></div><div id="clock1" class="fl clock">ERROR</div><div class="cl"></div>
<div class="fl"><input type="button" onclick="window['clock2'].startClock();" value="start"><input type="button" onclick="window['clock2'].lapClock();" value="lap"><input type="button" onclick="window['clock2'].stopClock();" value="stop"><input type="button" onclick="window['clock2'].resetClock();" value="reset"></div><div id="clock2" class="fl clock">ERROR</div><div class="cl"></div>
<div class="fl"><input type="button" onclick="window['clock3'].startClock();" value="start"><input type="button" onclick="window['clock3'].lapClock();" value="lap"><input type="button" onclick="window['clock3'].stopClock();" value="stop"><input type="button" onclick="window['clock3'].resetClock();" value="reset"></div><div id="clock3" class="fl clock">ERROR</div><div class="cl"></div>
</body>
</html>
我缩小了]（jscompress.com）简单的代码 - 使用jsbeautifier.org来“unminify”。
AJAX时间研究/ AJAX秒表的好工具
警告！将超时设置为“1”将显着增加CPU。我发现一个快乐的中位数大约35-80毫秒。
Try it now! - 这适用于支持ECMAScript 5的现代浏览器
Try it now! - 这适用于使用JQuery代理的旧浏览器代替bind
答案 2 :(得分：0)
这将永远从0-well运行两个独立的第二个定时器实例。 只需将其修改为您需要的内容即可。
<head>
<script type="text/java">
<!--
var t;
var c0;
var c1;
function timer()
{
document.getElementById('ticker0').value=c0;
c0=c0+1;
document.getElementById('ticker1').value=c1;
c1=c1+1;
t=setTimeout(\"timedCount()\",1000);
}
-->
</script>
</head>
<body onload="timer()">
<form>
<input type="text" id="ticker0">
<input type="text" id="ticker1">
</form>
等...
反倒倒计时只需将您的c1，c2变量设置为=并将c1=c1+1更改为c1=c1-1，将c2=c2+1更改为{{1} }。