js中关于多个定时器的问题

本人js初学者，自己做了一个计时器，在一个事件中创建了多个计时器，怎么可以让他们同时关闭呢,求优化,只制作了部分

这里是body的部分

   <input type="button" value="点击开始计时" id="btn1">
   <input type="button" value="停止计时" id="btn2">
   <br>
   <span>0</span>
   <span>0</span>
   :
   <span>0</span>
   <span>0</span>


以下是js的部分

window.onload  =function(){
   var oBtn1 = document.getElementById('btn1');
   var oBtn2 = document.getElementById('btn2');
   var aSpan = document.getElementsByTagName('span');
   var timer = '';
   var number = '';

   
   oBtn1.onclick = function(){

       setInterval(function(){
      number=3;
      aSpan[number].innerHTML = parseInt(aSpan[number].innerHTML)+1;
  if(aSpan[number].innerHTML==10)
  {
     aSpan[number].innerHTML  = 0;
  }

   },1000);
   
   setInterval(function(){
      number = 2;
  aSpan[number].innerHTML = parseInt(aSpan[number].innerHTML)+1;
  if(aSpan[number].innerHTML == 6)
  {
    aSpan[number].innerHTML = 0;
  }
   oBtn2.onclick = function(){
  clearInterval(timer4);
   }; 
   },10000);
     
   };
};

好繁琐

2 个解决方案

#1

		window.onload  =function(){
		   var oBtn1 = document.getElementById('btn1');
		   var oBtn2 = document.getElementById('btn2');
		   var aSpan = document.getElementsByTagName('span');
		   var timer1 , timer2;
		   var number = '';

		   
		   oBtn1.onclick = function(){

		       timer1 = setInterval(function(){
			      number=3;
			      aSpan[number].innerHTML = parseInt(aSpan[number].innerHTML)+1;
				  if(aSpan[number].innerHTML==10)
				  {
				     aSpan[number].innerHTML  = 0;
				  }

			   },1000);
			   
			  timer2 = setInterval(function(){
			      number = 2;
				  aSpan[number].innerHTML = parseInt(aSpan[number].innerHTML)+1;
				  if(aSpan[number].innerHTML == 6)
				  {
				    aSpan[number].innerHTML = 0;
				  }
			   },10000);
		   };
		   oBtn2.onclick = function(){
			  clearInterval(timer1);
			  clearInterval(timer2);
		   }; 
		};

#2

优化的话，只用一个span和一个定时器就好了

	   <input type="button" value="点击开始计时" id="btn1">
	   <input type="button" value="停止计时" id="btn2">
	   <br>
	   <span id="time">00:00</span>
		<script type="text/javascript">
		window.onload = function() {
			var oBtn1 = document.getElementById('btn1');
			var oBtn2 = document.getElementById('btn2');
			var t = document.getElementById("time");
			var timer;
			var number = 0;

			oBtn1.onclick = function() {
				clearInterval(timer);
				timer = setInterval(function() {
					number++;
					var m = Math.floor(number/60);
					var s = number%60;
					t.innerHTML = (m>9?"":"0")+m+":"+(s>9?"":"0")+s;
				}, 1000);
			};
			oBtn2.onclick = function() {
				clearInterval(timer);
			};
		};
		</script>