var my={} function stopwatchMain(){var version='0.82';my.hists=[] my.imgHome=(document.domain=='localhost')?'/mathsisfun/images/':'/images/' var btnw=45 var s=`
© 2019 MathsIsFun.com v${version}
` document.write(s);my.clocks=[] var dad=document.getElementById('timers') for(var i=0;i<3;i++){var sw=new StopWatch(dad,i) my.clocks.push(sw)} console.log('my.clocks',my.clocks)} function timesUp(clock){console.log('timesUp',clock)} function clockAdd(){var sw=new StopWatch(document.getElementById('timers'),my.clocks.length) my.clocks.push(sw)} function clockSub(){if(my.clocks.length>1){var clock=my.clocks[my.clocks.length-1] console.log('clockSub',clock) document.getElementById('timers').removeChild(clock.div) my.clocks.pop()}} function clockPlay(n){var sw=my.clocks[n] var s=sw.clock.update() var playQ=sw.playBtn.toggle() if(playQ){sw.clock.stop() histAdd(sw.id,s,' || ')}else{sw.clock.resume()}} function clockReset(n){var sw=my.clocks[n] if(!sw.clock.stopQ){var s=sw.clock.update() histAdd(sw.id,s,'◯')} sw.clock.reset() console.log('clockReset',n,sw) sw.playBtn.playQ=false sw.playBtn.toggle()} function clockMark(n){var sw=my.clocks[n] if(!sw.clock.stopQ){var s=sw.clock.update() histAdd(sw.id,s,'    ')}} function histAdd(id,s,endStr){var timeStr=s.substr(0,2)+':'+s.substr(2,2)+':'+s.substr(4,2)+'.'+s.substr(6) var histStr=id+' '+timeStr+' '+endStr my.hists.unshift(histStr);histUpdate()} function histGet(){var s="";for(var i=0;i` this.div.appendChild(this.resetDiv) var drawSVGQ=false if(drawSVGQ){var img=new Image();var el=document.createElement('canvas');el.width=30 el.height=30 this.resetDiv.appendChild(img) var svg='';var mySrc='data:image/svg+xml;base64,'+window.btoa(svg);var img=new Image();var g1=el.getContext('2d') img.onload=function(){g1.drawImage(img,4,5);console.log('sdfsf')};img.src=mySrc;} this.playDiv=document.createElement("div");this.playDiv.style.cssText='position: absolute; left: 50px; top:1px' this.playDiv.innerHTML=`` this.div.appendChild(this.playDiv) this.playBtn=new PlayBtn(40,'play'+n,`clockPlay(${n})`,'play','pause') this.clockDiv=document.createElement("div");this.clockDiv.id='timer'+n this.clockDiv.style.cssText='position: absolute; left: 100px' this.div.appendChild(this.clockDiv) this.clock=new DigiClock(30,'24','timer'+n) this.clock.setTime(0,0,0) this.clock.upQ=true this.clock.stop() var div=document.createElement("div");div.style.cssText='position: absolute; font: 30px Arial; color:darkblue; left: 330px; top:6px; cursor:pointer; background-color:#def; padding:2px;' div.innerHTML=`
${this.id}
` this.div.appendChild(div) return this}} class DigiClock{constructor(ht,mode,divName){this.numHt=ht;this.mode=mode;this.typ='led';this.upQ=true;this.fromTime=0;this.hhQ=true;this.mmQ=true;this.ssQ=true;this.msQ=true;this.numWd=this.numHt*0.45;this.numGap=this.numWd*0.5;this.border=this.numHt*0.3;this.ht=this.numHt+this.border*2;var wd=0;var colonWd=this.numWd*0.7;if(this.hhQ)wd+=2*(this.numWd+this.numGap)+colonWd;if(this.mmQ)wd+=2*(this.numWd+this.numGap)+colonWd;if(this.ssQ)wd+=2*(this.numWd+this.numGap)+colonWd;if(this.msQ)wd+=3*(this.numWd+this.numGap)+colonWd;wd-=this.numGap;wd-=colonWd;wd+=this.numGap/2;this.wd=wd+this.border*2;console.log('DigiClock',wd,this);switch(this.typ){case 'lcd':this.clr={bg:'#ccc',border:'2px solid #888',on:'#222',off:'#ccc',shadow:'#ccc',shadowBlur:0};break;case 'led':this.clr={bg:'#222',border:'2px solid black',on:'rgb(100, 255, 0)',off:'rgb(50, 80, 0)',shadow:'rgb(100, 255, 0)',shadowBlur:33};break;default:} this.div=document.getElementById(divName);this.div.style.height=this.ht+'px';this.div.style.width=this.wd+'px';this.el=document.createElement("canvas");this.div.appendChild(this.el);this.el.style.backgroundColor=this.clr.bg;this.el.style.borderRadius="10px";var ratio=2;this.el.width=this.wd*ratio;this.el.height=this.ht*ratio;this.el.style.width=this.wd+"px";this.el.style.height=this.ht+"px";this.g=this.el.getContext("2d");this.g.setTransform(ratio,0,0,ratio,0,0);this.numbers={n0:[1,1,1,0,1,1,1],n1:[0,0,1,0,0,1,0],n2:[1,0,1,1,1,0,1],n3:[1,0,1,1,0,1,1],n4:[0,1,1,1,0,1,0],n5:[1,1,0,1,0,1,1],n6:[0,1,0,1,1,1,1],n7:[1,0,1,0,0,1,0],n8:[1,1,1,1,1,1,1],n9:[1,1,1,1,0,1,1],A:[1,1,1,1,1,1,0],P:[1,1,1,1,1,0,0]};this.stt=performance.now();this.sofar=0;this.update();} setTime(h,m,s){this.fromTime=(((h*60)+m)*60+s)*1000;this.sofar=0;this.stt=performance.now();this.update();} start(){this.stt=performance.now();this.stopQ=false;this.sofar=0;this.loop();} stop(){this.stopQ=true;this.sofar=this.total();} reset(){this.stopQ=true;this.sofar=0 this.setTime(0,0,0)} resume(){console.log('resume',this.sofar);this.stt=performance.now();this.stopQ=false;this.loop();} loop(){if(!this.stopQ){this.update();requestAnimationFrame(this.loop.bind(this));}} total(){var elapsed=performance.now()-this.stt;elapsed+=this.sofar;return elapsed;} update(){this.g.clearRect(0,0,this.wd,this.ht);var elapsed=this.total();if(!this.upQ){elapsed=this.fromTime-elapsed;if(elapsed<0){if(!this.stopQ){this.stopQ=true;timesUp(this);elapsed=0;}}} var hours=elapsed/3.6e6|0;var minutes=elapsed%3.6e6/6e4|0;var seconds=elapsed%6e4/1e3|0;var millis=elapsed%1e3|0;if(hours<10){hours='0'+hours;} if(minutes<10){minutes='0'+minutes;} if(seconds<10){seconds='0'+seconds;} millis=pad('000',''+millis,true);var timeStr='';if(this.hhQ)timeStr+=hours;if(this.mmQ)timeStr+=minutes;if(this.ssQ)timeStr+=seconds;if(this.msQ)timeStr+=millis;this.timeStr=timeStr var posX=this.border;var posY=this.border;for(var i=0;i';return s;} toggle(){var div=document.getElementById(this.id);if(this.playQ){this.playQ=false;div.classList.add(this.offClass);div.classList.remove(this.onClass);}else{this.playQ=true;div.classList.add(this.onClass);div.classList.remove(this.offClass);} return this.playQ}} function pad(padFull,str,leftPadded){if(str==undefined)return padFull;if(leftPadded){return(padFull+str).slice(-padFull.length);}else{return(str+padFull).substring(0,padFull.length);}}