简单的计时器，秒表的实现。

Bertha 。 2022-03-20 11:16 447阅读 0赞

现在每个人的手机上都有一个秒表。我呢，就给大家介绍一下秒表的简单实现原理。  
一般秒表有一个显示时间的区域，还有三个键，开始、暂停、复位。  
我给大家来介绍的秒表是把开始跟暂停和在一个按键上面的。  
下面就是详细的步骤。  
首先呢，需要一个容器装着‘显示器’，按键。秒表一般只有毫秒、秒、分。两个按键。  
我们先要有一个记录总时间的i，还要有关闭计时器的开关。  
打开计时器，打开计时器之前要先关闭一次计时器。打开计时器，因为计时器是100毫秒动一次。我们要对毫秒取整。  
因为我们是开始暂停是一个键。添加点击事件，默认isRuning = false；是停止状态，按键为开始，关闭计时器。当为true为计时器开启状态。按键变为暂停调用计时器函数。  
复位是一个单独键。点击时关闭计时器，暂停按键变为开始，时间设置为0。  
下面是实现的代码。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		#div1{
    			width:300px;
    			height: 200px;
    			background:orange;
    			margin:100px auto;
    			text-align: center;
    			padding-top:100px;
    		}
    		#div1 span{
    			font-size: 20px;
    		}
    		#div1 #span3{
    			font-size: 15px;
    			color:blue;
    		}
    	</style>
    	<script>
    			window.onload = function(){
    
    				var i = 0;
    				timer = null;
    				function setIn(){
    					clearInterval(timer);
    					timer = setInterval(function(){					
    						i++;
    						$('span3').innerHTML = i % 10;
    						$('span2').innerHTML = Num(parseInt(i / 10) % 60);
    						$('span1').innerHTML = Num(parseInt(i / 10 / 60));
    					},100)
    				}
    					//开始
    				
    				//暂停
    				// $('pause').onclick = function(){
    				// 	clearInterval(timer);
    				// }
    				//复位
    				//
    				//
    				var isRuning = false;
    				$("start").onclick = function(){
    					if(!isRuning){
    						isRuning = true;
    						$("start").innerHTML = '暂停';
    						setIn()
    					}else{
    						isRuning = false;
    						$("start").innerHTML = '开始';
    						clearInterval(timer);
    					}
    
    				}
    
    
    				$('reset').onclick = function(){
    					i = 0;
    					$('span3').innerHTML = '0';
    					$('span2').innerHTML = '00';
    					$('span1').innerHTML = '00';
    					clearInterval(timer);
    					$("start").innerHTML = '开始';
    					isRuning = false;
    				}
    
    			
    			}
    		
    			function $(id){
    				return document.getElementById(id);
    			}
    
    			function Num(n){
    				if(n >= 10){
    					return n;
    				}else{
    					return "0" + n;
    				}
    			}
    	</script>
    </head>
    <body>
    	<div id= "div1">
    		<span id = "span1">00</span>
    		<span>:</span>
    		<span id = "span2">00</span>
    		<span>.</span>
    		<span id ="span3">0</span>
    		<br>
    		<button id ="start">开始</button>
    		<br>
    		<button id = "reset">复位</button>
    	</div>
    </body>
    </html>