JavaScript实现效果——秒表计时

最新推荐文章于 2021-10-05 03:28:41 发布

Blue.星辰*

最新推荐文章于 2021-10-05 03:28:41 发布

阅读量1.1k

点赞数 2

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_43311121/article/details/104540246

版权

1、效果如下：

在这里插入图片描述

2、代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计时器</title>
		<style type="text/css">
			.all{
				width: 300px;
				text-align: center;
			}
			#time{
				height: 20px;
				font-size: 20px;
			}
			button{
				width: 80px;
				height: 30px;
				cursor: pointer;	/* 鼠标悬停样式 */
			}
			#reset,#stop{
				visibility: hidden;	/* '重置计时'和'记录时间'按钮默认隐藏(占用空间) */
			}
			#abc{
				display: none;		/* 隐藏掉间隔时间计时栏(不占空间) */ 
			}
		</style>
	</head>
	<body>
		<div class="all">
			<p id="time"></p>
			<p id="abc"></p>
			<button id="reset">重置计时</button>
			<button id="btn"></button>
			<button id="stop">记录时间</button>
			<p id="text"></p>
		</div>
		<script type="text/javascript">
			var minutes=seconds=msec=n=0;
			var a=b=c=0;
			var time = document.getElementById('time');
			var abc = document.getElementById('abc');
			var reset = document.getElementById('reset');
			var btn = document.getElementById('btn');
			var stop = document.getElementById('stop');
			var text = document.getElementById('text');
			// 自定义函数timeShow()，用于显示间隔时间
			function timeShow(){
				abcd = setInterval(function(){
					c++;		//毫秒自增
					if(c/100 === 1) { b++; c = 0; }	//每100毫秒时，秒数+1，毫秒清零
					if(b/60 === 1) { a++; b = 0; }	//每60秒时，分钟+1，秒数清零
					// 显示时间，且当分钟、秒、毫秒为个位数时，在前面补0
					abc.innerHTML = (a<10?"0"+a:a)+":"+(b<10?"0"+b:b)+"."+(c<10?"0"+c:c);
				},10);
			}
			btn.innerHTML = "开始计时";		//中间的按钮默认显示为'开始计时'
			time.innerHTML = "00:00.00";	//默认显示时间为'00:00.00'
			// 点击中间的按钮进行判断并执行相应的操作
			btn.onclick = function(){
				//1、中间按钮显示为'开始计时'或者'继续计时'时
				if(btn.innerHTML === "开始计时"||btn.innerHTML === "继续计时"){
					timeShow();				//调用函数timeShow()
					btn.innerHTML = "暂停计时";			//中间按钮更改显示为'暂停计时'
					reset.style.visibility = "hidden";	//左边按钮'重置计时'隐藏
					stop.style.visibility = "visible";	//右边按钮'记录时间'显示
					//1-1、设置时间显示定时器timing，每10毫秒刷新显示一次
					timing = setInterval(function(){
						msec++;		//毫秒自增
						if(msec/100 === 1) { seconds++; msec = 0; }		//每100毫秒时，秒数+1，毫秒清零
						if(seconds/60 === 1) { minutes++; seconds = 0; }   //每60秒时，分钟+1，秒数清零
						// 显示时间，且当分钟、秒、毫秒为个位数时，在前面补0
						time.innerHTML = (minutes<10?"0"+minutes:minutes)+":"+(seconds<10?"0"+seconds:seconds)+"."+(msec<10?"0"+msec:msec);
					},10);
					//1-2、点击右边按钮'记录时间'，记录并显示当前时间
					stop.onclick = function(){
						n++;	//变量n自增，用于标识显示记录次数
						pNode = document.createElement("p");	//创建一个新的'<p></p>'
						// 新建的'<p></p>'中显示当前时间&&间隔时间
						pNode.innerHTML = "第"+n+"次&emsp;"+time.innerHTML+"&emsp;间隔&nbsp;"+abc.innerHTML;
						text.appendChild(pNode);	//把创建好的'<p>当前时间</p>'放到结尾
						a=b=c=0;	//间隔时间的相关变量重置为0
					}
				}
				//2、中间按钮显示为'暂停计时'时
				else{
					//2-1、清除定时器timing，并更改按钮显示
					clearInterval(timing);
					btn.innerHTML = "继续计时";			//中间按钮更改显示为'继续计时'
					stop.style.visibility = "hidden";	//右边按钮'记录时间'隐藏
					reset.style.visibility = "visible";	//左边按钮'重置计时'显示
					//2-2、点击左边按钮'重置计时'
					reset.onclick = function(){
						minutes=seconds=msec=n=0;		//相关变量重置为0
						time.innerHTML = "0"+minutes+":0"+seconds+".0"+msec;//计时器当前显示时间重置为00:00.00
						text.innerHTML = null;			//清空时间记录
						reset.style.visibility = "hidden";	//左边按钮'重置计时'隐藏
						btn.innerHTML = "开始计时";			//中间按钮更改显示为'开始计时'
						abc.innerHTML = null;			//清空间隔时间
						a=b=c=0;			//间隔时间的相关变量重置为0
					}
					clearInterval(abcd);				//清除间隔时间定时器abcd
				}
			}
		</script>
	</body>
</html>