vue页面实现短信验证码60秒倒计时

废话不多说,直接上代码.

template

  <div class='single-wrapper fs14'><div class='single-mb'>短信验证</div><mt-field type='number' v-model="phoneMessage"  placeholder="短信验证码" class='message-wrapper fs15'><mt-button size='small' class='fs14' @click="getCode" :disabled="codeDisabled">{{codeMsg}}</mt-button></mt-field></div>

javascript

第一版

<script type="text/javascript">
export default {data(){return {// 是否禁用按钮codeDisabled: false,// 倒计时秒数countdown: 60,// 按钮上的文字codeMsg: '获取验证码',// 定时器timer: null,}},methods: {// 获取验证码getCode() {// 验证码60秒倒计时if (!this.timer) {this.timer = setInterval(() => {if (this.countdown > 0 && this.countdown <= 60) {this.countdown--;if (this.countdown !== 0) {this.codeMsg = "重新发送(" + this.countdown + ")";} else {clearInterval(this.timer);this.codeMsg = "获取验证码";this.countdown = 60;this.timer = null;this.codeDisabled = false;}}}, 1000)}},}
}
</script>

优化版

上面的代码已经实现了验证码倒计时的问题, 但仔细看会发现,在第一次点击的时候,要过1秒钟才会改变文案, 存在延时,对用户来说体验不友好, 那么可以这样改进:

  methods: {getValidStr(){if (this.countdown > 0 && this.countdown <= 60) {this.countdown--;if (this.countdown !== 0) {this.codeMsg = "重新发送(" + this.countdown + ")";} else {clearInterval(this.timer);this.codeMsg = "获取验证码";this.countdown = 60;this.timer = null;this.codeDisabled = false;}}},// 获取验证码getCode() {// 验证码60秒倒计时if (!this.timer) {this.getValidStr();this.timer = setInterval(this.getValidStr, 1000)}},}

也就是把setInterval的第一个参数,即函数, 提取出来, 然后先立即触发一次再进行延时倒计时,这样用户一点击按钮就会立即响应了,用户体验好了很多.

vue页面实现短信验证码60秒倒计时相关推荐

vue element-ui实现获取短信验证码 ,60秒倒计时及页面
cc废话不多说先上效果图 vue页面布局 <el-form-item prop="phoneCode" class="pr"><el-inp ...
使用Jquery实现获取短信验证码60秒倒计时
现在使用手机号+验证码的方式注册账号已经成为一种必备功能,当我们输入手机号点击发送验证码按钮后,按钮应该不可被再次点击,并开始倒计时,倒计时结束后才能再次点击.这一个可以借助某些插件实现,但其实使用J ...
短信验证码60秒倒计时
html 区域 <el-button :disabled="isClick" @click="doNotRepeatOperation">{{tim ...
java短信验证码 60秒_Rxjava操作符飙车系列（三）验证码倒计时
现在很多软件都需要获取短信验证码,通常都是60秒在向服务器发送一次请求.那么如果用Rxjava来实现这个倒计时的功能呢? 用到的操作符如下: 1.interval: interval 创建一个按照给定 ...
php短信验证码60秒时间限定
我们在实际使用短信验证码的时候,经常会因为各种原因,收不到短信,那么用户就会再重新请求一条,但是呢,一般的短信验证肯定是有时间间隔的,这样做,第一是为了防止恶意点击,一直发验证码,导致验证码消耗量巨大 ...
php 短信验证码30分钟,php下发短信验证码60秒简单验证
下发短信验证码,除了注册就是验证手机号简单实现原理就是用手机号和一个键作为key存到缓存里, 用户请求的时候,验证这个手机号是不是已经申请过key*(即已手机号为缓存的key有没有,)如果有,并且 ...
iOS 之倒计时 NSTimer 短信验证码 60秒 60分钟
- (void)viewDidLoad { [superviewDidLoad]; label = [[UILabelalloc]initWithFrame:CGRectMake(10,120, 12 ...
简单实现vue验证码60秒倒计时功能
简单实现vue验证码60秒倒计时功能 <span v-if="codeShow" @click="getPhoneCode">点击获取验证码< ...
vue获取手机验证码60秒倒计时，不能点击按钮
vue获取手机验证码60秒倒计时,不能点击按钮 export const resend = element => {console.log(element)var num = 60var tim ...

vue页面实现短信验证码60秒倒计时

template

javascript

第一版

优化版

vue页面实现短信验证码60秒倒计时相关推荐

最新文章

热门文章