JS实现秒表

最新推荐文章于 2023-11-01 13:47:56 发布

fgf-2021

最新推荐文章于 2023-11-01 13:47:56 发布

阅读量161

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42303695/article/details/107186016

版权

秒表

编写html和css

	<body>
		<div id="div1">
			<span id="hour">
				00
			</span>
			<span id="min">
				00
			</span>
			<span id="sec">
				00
			</span>
			<br>
			<button id="btn">开始</button>
			<button id="reset">复位</button>
		</div>
	</body>

<style type="text/css">
	#div1{width: 200px;height: 300px;background:orange;text-align: center;margin: 50px auto;}
	button{display: block;margin: 30px auto;}
</style>

首先定义全局变量

var i=0;
var timer=null;
var isRunning=false;
window.onload=function(){}//下面所有的函数都要在这里面编写

然后编写秒表开始计数和暂停计数的函数

//开始计数
function startFunc(){
	timer=setInterval(function(){
	i++;
	document.getElementById("sec").innerHTML=numTotwo(i%60);
	document.getElementById("min").innerHTML=numTotwo(parseInt(i/60)%60);
	document.getElementById("hour").innerHTML=numTotwo(parseInt(i/3600));
	},1000);
}
//暂停计数
function pauseFunc(){
	clearInterval(timer);
}

编写开始暂停的事件驱动函数

document.getElementById("btn").onclick=function(){
	if(!isRunning){
		document.getElementById("btn").innerHTML="暂停";
		isRunning=true;
		startFunc();
	}
	else{
		document.getElementById("btn").innerHTML="开始";
		isRunning=false;
		pauseFunc();
	}
}

编写复位事件驱动函数

document.getElementById("reset").onclick=function(){
	clearInterval(timer);
	i=0;
	isRunning=false;
	document.getElementById("btn").innerHTML="开始";
	document.getElementById("sec").innerHTML="00";
	document.getElementById("min").innerHTML="00";
	document.getElementById("hour").innerHTML="00";
}

上面用到的函数numToTwo是让时分秒计数有两位数

function numTotwo(n){
	if(n>=0&&n<=9){
		return "0"+n;
	}
	else{
		return n;
	}
}

fgf-2021

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫