js制作一个定时器

我爱的昵称为什么都存在

已于 2022-06-03 00:59:10 修改

阅读量1.8k

点赞数 1

文章标签： javascript

于 2022-04-28 23:17:30 首次发布

本文链接：https://blog.csdn.net/weixin_50501118/article/details/124485677

版权

最近想制作一个小项目，要用到一个计时器，如图

按开始计时，按停止结束，再按开始从0开始

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="">
			时间<span id="clock">0</span>秒
		</div>
		<button type="button" onclick="start()" >开始</button><button type="button" onclick="end()" >停止</button>
		
		<script type="text/javascript">
		let clock=document.getElementById("clock")
		 let time=null //设置一个全局变量，后面方便clearInterval清除定时器
		let s=clock.innerHTML //获得html的元素内容用于显示时间
		let flag =true    //设置一个状态，让点击开始事件只执行一次，不然点得越多执行得越快
		function start(){  //点击开始事件
			if(flag){
			s=0;   //每次开始还原初始值到0秒
			 time=setInterval(()=>{  //定时器，参数为一个函数和间隔多久执行一次
				                 
				s++;
				clock.innerHTML=s},1000)
				flag=false         //改变状态，让开始无法执行
				}
				
		};
		function end()          //停止事件，用到清除定时器clearInterval，参数为一个全局变量
		{clearInterval(time)
		flag=true               //还原状态，让开始可以执行
		};
		
		
		
		
		
		
		</script>
	</body>
</html>

舒尔特汉字颜色方格：

小程序舒尔特方格源代码_我爱的昵称为什么都存在的博客-CSDN博客小程序舒尔特方格源代码，使用uniapp编写https://blog.csdn.net/weixin_50501118/article/details/125075453

我爱的昵称为什么都存在

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js制作一个定时器

最近想制作一个小项目，要用到一个计时器，如图按开始计时，按停止结束，再按开始从0开始<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id=""> 时间<span id="clock">0</span>秒 &.
复制链接

扫一扫