VUE定时器，用于登陆获取验证码倒计时

第一步

在当前的按钮中添加@click 事件，并在按钮内文字后面加上变量，并用v-if进行判断，看秒数是否大于0

并且添加disabled，当second>0的时候给它disabled掉。

第二步

在data里将变量赋值为0，所以0肯定不会大于0，默认情况就是显示点击发送

第三步

将click事件的值传到方法里，然后添加一个setInterval，是一个实现定时调用的函数。并在里面进行判断，并且我们为当前的second赋一个值（秒数都可以），如果当前的秒数大于0的话，就一步步减去，每次减去为1000毫秒。

然后当我们点击按钮后，就会出现倒计时并且无法进行重复点击的操作，倒计时结束后就会变回一开始获取验证码时的样子，很实用。

VUE定时器，用于登陆获取验证码倒计时相关推荐

vue+vant 实现手机号获取验证码页面
vue+vant 实现手机号获取验证码页面 html <van-field label="手机号"v-model="phone"centerrequir ...
vue 获取验证码倒计时组件
之前写过一个计时函数,有计算误差,但是验证码的60秒倒计时可以忽略这一点点误差.直接上代码. <template><div class="captcha-row" ...
vue使用element发送手机验证码倒计时
发送验证码倒计时 html <el-form class="form" :model="form" labeal-position="left& ...
Flutter获取验证码倒计时按钮
在Flutter中,有一个定时器类Timer,使用方法: Timer timer = new Timer(new Duration(milliseconds: 60), (){//倒计时结束执行}); ...
android 获取验证码倒计时
在开发时,登陆注册时必有的模块,下面是记录一下注册时获取验证码的方法:效果图如下: 获取验证码后,进入倒计时并且是不可点击的状态. 1.复制下面工具类到项目中 import android.graph ...
js获取验证码倒计时60s(超简单)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Axure9 实现点击获取验证码倒计时功能
此文章帮助大家实现App的点击获取验证码的倒计时功能. 1:创建按钮和全局变量: 拖入一个矩形,创建全局变量Time=60. 在项目里面就可以找到创建全局变量的地方. 2:添加点击事件: (1):添加 ...
jQuery 点击获取验证码,倒计时30秒
//HTML: <div class="layui-form-item"> <input class="layui-yanzheng" ...
js 获取验证码倒计时
1 html 部分 <text :disabled="disabled" @click="getCode">{{ btntext }}</te ...

VUE定时器，用于登陆获取验证码倒计时

VUE定时器，用于登陆获取验证码倒计时相关推荐

最新文章

热门文章