秒表计时器

最新推荐文章于 2017-10-03 18:25:48 发布

Annlilawer

最新推荐文章于 2017-10-03 18:25:48 发布

阅读量608

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/Anlilower/article/details/52604361

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

秒表计时器

效果

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="oTxt">00:00</div>
	<button id="begin">开始</button>
	<button id="pause">暂停</button>
	<button id="reset">重置</button>
	<script type="text/javascript">
		var oTxt = document.getElementById('oTxt');
		var begin = document.getElementById('begin');
		var pause = document.getElementById('pause');
		var reset = document.getElementById('reset');
		var timer;
		var n = 0;
		
		begin.onclick = function(){
			clearInterval(timer);
			timer = setInterval(function(){
				n++;
				h = parseInt(n/60);
				s = n % 60;
				oTxt.innerHTML = toDob(h) +':' + toDob(s);			
			},1000);
		}
		pause.onclick = function(){
			clearInterval(timer);
		}
		reset.onclick = function(){
			oTxt.innerHTML = '00:00';
			n = 0;
		}
		function toDob(num)
		{
			if (num < 10) {
				return '0'+ num;
			} else {
				return num;
			}
		}
	</script>
</body>
</html>