JS 实现停止和继续倒计时

即使自己很菜,也要一点一点的爬,总有一天可以成为大佬级的人物,

1  
2 <button class="btn1">发送验证码</button>
3 
4 <button class="btn2">停止</button>
5 
6 <button class="btn3">继续</button>
7 
8 <script type="text/javascript" src="1.js"></script>

1.js

 1 function countNum(cb1,cb2,num){
 2 
 3     let count;
 4     let timer = null;
 5     if(num){
 6         count = num;
 7     }else{
 8         count = 60
 9     }
10     timer = setInterval((num)=>{
11         if(count != 0){
12             count--;
13             cb1(count)
14 
15         }else{
16             clearInterval(timer)
17             cb2 && cb2()
18             return false;
19         }
20     },1000)
21     return timer
22 }
23 
24 let btn = document.querySelector('.btn1')
25 let btn2 = document.querySelector('.btn2')
26 let btn3 = document.querySelector('.btn3')
27 btn.addEventListener('click',()=>{
28     console.log(this)
29     this.a = this.countNum((time)=>{
30             btn.innerText = time;
31             return time;
32         },()=>{
33             btn.innerText = '发送验证码';
34 
35         },null)
36 },false)
37 
38 btn2.addEventListener('click',()=>{
39     console.log(this)
40     clearInterval(this.a)
41 },false)
42 
43 btn3.addEventListener('click',()=>{
44     console.log(btn)
45     this.a = this.countNum((time)=>{
46         btn.innerText = time;
47     },()=>{
48         btn.innerText = '发送验证码';
49     },btn.innerText)
50 
51 },false)

菜鸟只能想到这种方法,如果有更好的方法,衷心希望不吝赐教。万分感谢

原文地址:https://www.cnblogs.com/pfybk/p/14584706.html