【JavaScript】手机验证码倒计时

手机验证码倒计时

样式

点击“发送手机验证码”开启倒计时：

开启倒计时后，再次点击不会发起再次请求：

index.vue

<p class="title"><span class="required">*</span><span>手机号验证：</span>
</p>
<el-input v-model="verify" placeholder="输入验证码" style="width: 116px;"></el-input>
<span class="btn_verify" @click="sendCode">{{timer === 0 ? '发送手机验证码' : `${timer}s后重新获取`}}</span>

index.scss

.title {height: 32px;line-height: 32px;width: 130px;text-align: right;.required {color: #F76560;}
}
.btn_verify {cursor: pointer;color: #FFB200;margin-left: 8px;line-height: 32px
}

index.js

import { sendVerifyCode } from '@/api/myApi'export default {name: 'applyModal',data() {return {timer: 0,verify: null,params: {}}},mounted() {if (this.params.id !== this.$route.query.id) {this.params.id = +this.$route.query.id}},watch: {$route () {if (this.params.id !== this.$route.query.id) {this.params.id = +this.$route.query.id}}},methods: {sendCode () {// 开启倒计时效果if (this.timer === 0) {this.timer = 60setInterval(() => {if(this.timer <= 0) {return} else {// 单次定时任务执行的回调this.timer--}},1000,{// 默认不开启定时任务immediate: false})} else {return}let query = {}query.id = +this.params.id// 发送请求sendVerifyCode(JSON.stringify(query)).then((res) => {if (res.data.status === 0) {this.$message.success(res.data.msg || '手机验证码已发送，请注意查收!')} else {this.$message.error('手机验证码发送失败!')}})}}
}

【JavaScript】手机验证码倒计时相关推荐

jquery发送手机验证码倒计时插件支持页面刷新
在最新项目中需要用到发送短信短信验证码,网上搜了半天找不到满意的,就自己写了一个. jquery封装好的发送手机验证码倒计时插件采用cookie 防止页面刷新. 实现思路: 1.实现点击按钮,对手机 ...
获取手机验证码倒计时功能
倒计时: 例如:登录页面获取手机验证码登录代码: /* text:'获取验证码' => 按钮的初始展示样式是获取验证码 disabled:false, => 是否禁用按钮防止用户在短时 ...
vue使用element发送手机验证码倒计时
发送验证码倒计时 html <el-form class="form" :model="form" labeal-position="left& ...
【jQuery】手机验证码倒计时效果
<ul class="ulist"><li class="group"><label class="label" ...
js模拟手机验证码倒计时
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
vue获取手机验证码倒计时
现在有许多移动端登录是使用的是手机号码加验证码的方式登陆的,但是很多时候为了防止恶意获取短信验证码需要在前端做一些控制. 例如下列场景: 我们在前端写一个定时器函数,显然可以满足倒计时功能,但是页面被 ...
Vue - 实现获取手机验证码倒计时 60 秒（手机号+验证码登录功能）
前言网上的大部分获取验证码逻辑的例子,代码多还不健壮,本文将用最少的代码实现相同的功能. 当点击获取验证码按钮时,会自动进入倒计时,同时按钮无法点击, 您可以自定义倒计时时间,如下图所示: 这块由于 ...
手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)
短信验证码登录功能项目分析核心代码 1.外部js库调用 2.HTML容器构建 3.javaScript业务逻辑验证 4.后端验证逻辑总结短信验证码是通过发送验证码到手机的一种有效的验证码系统, ...
javaScript 局部功能实现（tab切换、距离某天还剩多少天、全选与反选、验证码倒计时）
局部功能实现了,成功还远吗?? 一.tab切换 <!DOCTYPE html> <html lang="en"> <head><meta ...

【JavaScript】手机验证码倒计时

手机验证码倒计时

样式

index.vue

index.scss

index.js

【JavaScript】手机验证码倒计时相关推荐

最新文章

热门文章