定时器的使用

最新推荐文章于 2023-12-07 11:14:08 发布

坚强的另一个名字

最新推荐文章于 2023-12-07 11:14:08 发布

阅读量293

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/weixin_49566574/article/details/125538941

版权

<body>
		
		<!-- 分类
			1.循环定时器
			2.一次性定时器  倒计时
		 -->
		
		<button type="button" id="btn">开始打印</button>
		<button type="button" id="stop">停止打印</button>
		<button type="button" id="dj">倒计时</button>
		<button type="button" id="stopDj">停止倒计时</button>
		<script type="text/javascript">
			
			var btn = document.querySelector('#btn')
			var stop = document.querySelector('#stop')
			var dj = document.querySelector('#dj')
			var stopDj = document.querySelector('#stopDj')
			var timerId ;
			btn.addEventListener('click',function(){
				// for (var i = 0; i < 10; i++) {
				// 	console.log('hello world');
				// }
				//开启定时器   function  定时任务   1000 间隔的时间  ms
				console.log(timerId);
				if(!timerId){
					timerId = setInterval(function(){
					console.log('hello world'+new Date().getTime());
				  },1000)
				}
				
			})
			
			//清空定时器
			stop.addEventListener('click',function(){
				clearInterval(timerId)
			})
			
			//倒计时
			
			dj.onclick = function(){
				timerId = setTimeout(function(){
					console.log("javascript");
				},5000)
			}
			
			stopDj.onclick = function(){
				clearTimeout(timerId)
			}
		</script>
		
	</body>