原生JavaScript实现网页计时器

阳光穿透心脏的1/2处 2022-05-19 01:24 406阅读 0赞

计时器的功能就是以秒为单位分别累加计时。其中提供了三个功能。计时：时间归零并开始计时；暂停：暂停当前计时器；继续：对暂停的计时器在当前时间上继续计时。时间格式是X时X分X秒。

这次先提供预览图，然后讲解思路，代码放在后面。换换之前的步骤看看哪种效果好一点。下面提供效果图，逻辑思路以及代码。

预览图：

![70][]

逻辑思路：

对页面进行布局就不讲了。直接讲逻辑。

1、首先定义了变量usedtime用来存储计时器总共计时的时间，变量t用来接收计时函数返回的计时器。

2、然后定义了继续方法proceed()对usedtime进行累加，其中用到了setTimeout(“fun",time)这个函数，该函数将会在time毫秒之后执行函数fun。其中clearTimeout(t)表示暂停计时器t。暂停方法stop()直接调用clearTimeout(t)即可。重新计时方法begin()将usedtime赋值为初始值，然后调用了继续方法proceed()。

3、最后在三个按钮上面的onclick事件上面分别调用这三个方法即可。

其中有个需要注意的地方。大家应该发现了，每个方法中都执行了一遍clearTimeout(t)。这是为什么呢？因为如果不执行这句代码而直接执行这句代码t = setTimeout("proceed()",1000);就会重新生成一个计时器，从而计时器的单位时间就不是1秒了，而是触发了几次proceed()，一秒内就会加几秒。最后的结果就是点击一次计时或者继续按钮，一秒内计时器加的数就会多一个，比如我点击7次继续，计时器一秒加的数就是7，而不是我们想要的加1。关于这一点，各位感兴趣的朋友可以把begin()和proceed()方法中的clearTimeout(t)去掉，看看最后的现象。

据此，希望各位朋友要知道测试的重要性。很少有人能把机器的逻辑理解通透，不做测试是很难有把握保证自己的程序不会出现bug的。上面的代码我会加上clearTimeout(t)就是在自己测试的时候发现了这个问题。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>计时器</title>
    <script type="text/javascript">
    	var usedtime = -1;	//计时已经花费的时间，单位秒
    	var t;//计时器对象
    	function begin(){	//计时开始
    		usedtime = -1;
    		clearTimeout(t);
    		proceed();
    	}
    	function proceed(){	//继续
    		usedtime++;
    		clearTimeout(t);
    		t = setTimeout("proceed()",1000);
    		document.getElementById("showTime").innerHTML=Math.floor(usedtime/3600)+"时"+(Math.floor(usedtime/60)%60)+"分"+(usedtime%60)+"秒";
    	}
    	function stop(){	//暂停
    		clearTimeout(t);
    	}
    </script>
    </head>
    <body>
    	<div style="position: absolute;top: 50px;left: 100px;font-size: 24px;background-color: #436EEE;padding: 5px;">
    		<div style="color: black;float: left;">计时器：</div>
    		<div id="showTime" style="color: white;float: left;">0时0分0秒</div>
    	</div>
    	<div style="position: absolute;top: 90px;left: 100px;font-size: 24px;padding: 5px;">
    		<input type="button" value="计时" onclick="begin()"/>
    		<input type="button" value="暂停" onclick="stop()"/>
    		<input type="button" value="继续" onclick="proceed()"/>
    	</div>
    </body>
    </html>

[70]: /images/20220519/7780e7e6bad04795a36feff9cfc78816.png