zoukankan      html  css  js  c++  java
  • 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)

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

  • 相关阅读:
    jQuery中 $ 符号的冲突问题
    典型用户,场景,用例图
    结对编程
    简易计算器
    对git的认识
    我的博客
    零基础免费搭建个人博客-hexo+github
    DTcmsV4.0分析学习——(3)URL重写
    DTcmsV4.0分析学习——(2)系统框架
    DTcmsV4.0分析学习——(1)数据库结构分析
  • 原文地址:https://www.cnblogs.com/pfybk/p/14584706.html
Copyright © 2011-2022 走看看