JS 基础 07：计时器方法

1.setInterval()的返回值 和 clearInterval()的形参联系起来

	let  i = setInterval(()=>{
		console.log("Hi");
	},1000)
			
	let btn = document.querySelector(".button")

	//addEventListener()的第二个参数不能直接写 clearInterval(i),而是用一个function(){}包起来	
	btn.addEventListener("click",()=>clearInterval(i))

案例1：秒表

<h1 class="jsq"></h1>
<button class="ks">开始</button>
<button class="zt">暂停</button>
<button class="cq">重启</button>

let ks = document.querySelector(".ks")
let zt = document.querySelector(".zt")
let cq = document.querySelector(".cq")
			
let jsq = document.querySelector(".jsq")
let [m,s]=[0,0]
jsq.innerHTML = `${m}:${s}`
			
//添加分钟的变化
let minInterval =null
ks.addEventListener("click",()=>{
clearInterval(minInterval)			//每一次点击前清空之前可能存在的计时器
minInterval = setInterval(()=>{
	m = (m+1)%60
    },1000*60)
})
			
//添加秒数的变化
let secInterval =null
ks.addEventListener("click",()=>{
    clearInterval(secInterval)
    secInterval = setInterval(()=>{
    s = (s+1)%60
    jsq.innerText = `${m}:${s}` 
    },1000)
})
//以上方案的问题是,点击多次按钮,事件会被叠加,体现为时间变快
			
			
//添加暂停功能
zt.addEventListener("click",()=>{
	//问题:无法获取ks.addEventListener()内定义的变量
	//方案一: 将setInterval()的返回值定义为全局变量,即去掉var/let 关键字	
	clearInterval(minInterval)
	clearInterval(secInterval)
	})
			
//添加重启功能
cq.addEventListener("click",()=>{
	[m,s]=[0,0]
	jsq.innerHTML = `${m}:${s}`
})