点击按钮倒计时 <button @click="getlogin" class="btn-bottom" type="primary" :disabled="disabled">{{ btnText }}</button>

data定义

 data () {
    return { 
        // 获取验证码
        disabled: false,
        interval:undefined,
        totalCount:0,
计算属性监视
 computed: {
      btnText(){
         return this.totalCount !==0? `${this.totalCount}秒再次获取`: "获取验证码"
methods
getlogin(){
          // 按钮60秒倒计时
            this.disabled=true
            this.totalCount=60
            this.getCode()   //60秒过倒计时过后才能调用的事件
            this.interval=setInterval(()=>{
              this.totalCount--
              if(this.totalCount === 0){
                clearInterval(this.interval)
                this.disabled=false
            },1000);
60秒过倒计时过后才能调用的事件
 getCode(){
        limingru
        Vue.js
       
    面向Vue新人：写一个简单的倒计时按钮
 
为了更快显示出效果，我把时间设成了5秒。按钮在点击之后会出现倒计时，同时按钮变为不可点击状态，样式也发生变化，鼠标悬浮上的样子也会发生变化。 在data里加了两条数据，一条用来记录时间，一条用来盛放倒计时按钮的具体内容。在countDown函数里我们用了setInterval定…
 
 1.1w
 
 
        JavaScript
      
 
    javaScript倒计时
 
//倒计时 let timeinterval=""; let countDownStart=""; countDown(timeTotal) { timeinterval = setInterval(() => { timeTotal--; countDownStar
 
 943
 
 
        用户2840793777451598
        JavaScript
      
 
    JavaScript 原生 小案例 60秒倒计时
 
功能展示：1.点击按钮，2.开始倒计时3.到1后还原为60
 
 543
 
 
        蓝色de眼
        JavaScript
      
 
    前端Vue实现手机号验证码登录（60s禁用倒计时）
 
最近做了个vue项目，前端通过手机号验证码的方式登录，获取验证码的按钮需要倒计时，点击一次之后，60秒内不能再次点击。先看效果图： 输入正确格式的手机号码后，“获取验证码” 按钮方可点击；点击“获取验
 
 163
 
 
        smile丽语
      
 
5年前
 
 
    iOS点击获取短信验证码按钮




    
 
在APP开发中，点击获取验证码的倒计时按钮是在注册、修改密码、绑定手机号等场景中使用！在项目中，多次使用这个按钮，现自定义一个简单的获取短信验证码倒计时功能。如果需要，可以直接拿走这个自定义的按钮ZL
 
 972
 
 
      
 
4年前
 
 
    vux 60秒倒计时
 
60秒倒计时
 
 495
 
 
        duolaimi
        Flutter
      
 
    Flutter获取验证码倒计时按钮
 
上面代码就是执行一个定时器，60秒后执行回调方法。但是无法获取倒计时的进度。所以我们可以创建一个周期性的Timer: 上面是一个按周期执行的timer，每隔1秒钟执行一次，所以我们可以利用这个来写倒计时按钮。
 
 2139
 
 
        laozuo
      
 
    JavaScript短信验证码60秒倒计时插件
 
1. 引入插件 2. 在"获取验证码"按钮上添加 class="captchaBtn"
 
 2132
 
 
        laozuo
        微信小程序
      
 
    榛子云短信-微信小程序60秒倒计时插件
 
3. 3.在获取验证码的按钮上增加captchaDisabled、captchaTxt 分别用于控制倒计时过程中是否可以点击、倒计时秒数提示 4. 调用start方法触发倒计时
 
 243
 





    
 
        张大鹅和郑小狗
        微信小程序
      
 
    小程序实战(十一)-验证码定时器
 
1. 校验手机号是否正确 2. 开启倒计时 3. 调用获取验证码接口 1. 有一个变量 time 用来存储初始时间：60s 2. 当 time 值为 0 时，按钮可点击，并将 time 初始化 3. 当 time 值不为 0 时，按钮不可点击，将 time 减 1，并设置一个定…
 
 1166
 
 
        laozuo
      
 
    发送短信验证码后60秒倒计时
 
jquery实现的发送短信验证码后60秒倒计时功能，完整实例可到http://smsow.zhenzikj.com/doc/sdk.html 下载"注册验证码"的demo。
 
 4051
 
 
        splendid
      
 
    由发送短信60秒倒计时业务，引出的setTimeout、setInterval问题
 
这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战 由发送短信60秒倒计时业务，引出的setTimeout、setInterval问题 首先是了解一下setTimeout、setInterva
 
 1167
 
 
        混元霹雳手
        Vue.js
        JavaScript
      
 
    Vue2.0进阶组件篇1  教你秒会（短信倒计时组件）
 
原本我想隔个几天再发文章，刚好今天项目上线，环境有问题，导致只有干等，刚好要为公司打造一套属于公司自己的一系列功能组件，这个使命就交给我了，大家也一直叫我来点干货，说实话我只是一个湿货，肚子里干一点就
 
 9483
 
 
      
 
4年前
 
 
     点击button倒计时
 
//第一种方法//点击button倒计时//第二种方法
 
 156
 





    
 
        Vue.js
      
 
    vue3倒计时功能封装
 
在前端项目中，倒计时功能是较为常用的功能模块，今天在做vue3项目时，正好碰到了这个需求，于是封装了一个功能函数，有了一些新的想法，决定记录一下...... 需要实现的效果是： js写法 以上是在vu
 
 259
 
 
        DylanAndroid
        Android
      
 
    【Android 自定义 View 实战】之获取验证码倒计时按钮
 
【Android 自定义 View 实战】之获取验证码倒计时按钮
 
 2609
 
 
        前端白小纯
      
 
    vue_实现倒计时功能
 
需求：前端实现倒计时功能，7天免登陆。点击获取验证码按钮后，按钮置灰，90秒后可以再次点击。 当登录到详情页，返回到登录页时，手机号回显，隐藏获取验证码按钮。 当更改手机号时，使用watch监听手机号
 
 48
 
 
        Edwin
        Vue.js
      
 
    Vue2项目中关于两个倒计时的实现
 
关于在Vue中写倒计时，可参考大佬写的：https://juejin.cn/post/7038405108371030047 为什么要用setTimeout来模拟setInterval的行为？ 也就是
 
 12
 
 
      
 
    JS使用时间戳实现倒计时
 
JS使用时间戳实现倒计时 1、点击按钮开始倒计时 2、获取点击按钮 3、开启定时器，每一秒调用一次，显示实时动态倒计时 ​ 3.1 获取当前的时间戳 ​ 3.2设置截止的时间戳 ​ 3.3获取倒计时的
 
 204
 
 
        andfaraway
      
 
    短信获取按钮倒计时
 
发送短信成功后需要倒计时一段时间才能够再次发送，在此记录一个iOS比较好的实现方法，如有什么问题欢迎讨论指正.
 
 62