获取验证码倒计时60秒

<template><view class="content"><view class="inps"><input class="inp" type="text" v-model="verify" value="" placeholder="请输入验证码"/><button type="default" @click="yanzheng" v-show="show">获取验证码</button><button type="default" v-show="!show">已发送({{time}})</button></view></view>
</template><script>export default {data() {return {time:60,show:true,}},onLoad() {},methods: {timed(){var that=thisvar times=setInterval(function(){that.time--;if(that.time == 0){clearInterval(times)that.time = 60that.show = true}},1000)},yanzheng(){if(this.phone){this.$myRequest({url: `url`, method:'post',data:{phone: this.phone,type:'2',}}).then(data=>{var message = data.data.messagevar phone = this.phonethis.$myRequest({url: `/app/sms/sendMessage?phone=${phone}&verifyCode=${message}`, method:'post',data:{phone: this.phone,type:'',verifyCode:data.data.message}}).then(data=>{console.log(data)if(data.data.code == 200){this.show = falsethis.timed();} else {uni.showToast({title: data.data.message,icon: 'none',    //如果要纯文本，不要icon，将值设为'none'duration: 2000    //持续时间为 2秒})}})})} else {uni.showToast({title: '请填写手机号',icon: 'none',    //如果要纯文本，不要icon，将值设为'none'duration: 2000    //持续时间为 2秒})  }}}}
</script>
<style>page{width: 100%;height: 100%;}
</style>
<style lang="scss" scoped>.content {width: 100%;height: 100%;background: #F5F5F5;position: relative;overflow: auto;box-sizing: border-box;.rongli{width: 240rpx;height: 80rpx;display: block;margin: 0 auto;margin-top: 15%;}.mycontent{width: 100%;height: 380rpx;background: url(../../static/image/ju.png) no-repeat;background-size: 100% 100%;color: #FFFFFF;padding: 20rpx;}.inps{width: 100%;height: 100rpx;padding: 15rpx;display: flex;justify-content: center;align-items: center;border-bottom: 1px solid #C8C9CC;button{font-size: 26rpx;width: 200rpx;color: #FFFFFF;background: #f02e4b;border-radius: 50rpx;}.inp{flex: 1;}}.xiabut{width: 90%;height: 100rpx;border-radius: 50rpx;margin-top: 80rpx;line-height: 100rpx;background: #f02e4b;color: #FFFFFF;}}
</style>

获取验证码倒计时60秒相关推荐

JS点击获取验证码后60秒内禁止重新获取（防刷新）
JS点击获取验证码后60秒内禁止重新获取(防刷新) 参考 · 阅读文章: JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效) 注意: 场景:在登录页点击发送啊验证码按钮,开始进入倒计时,在第3 ...
手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)
短信验证码登录功能项目分析核心代码 1.外部js库调用 2.HTML容器构建 3.javaScript业务逻辑验证 4.后端验证逻辑总结短信验证码是通过发送验证码到手机的一种有效的验证码系统, ...
JavaScript获取验证码，60秒倒计时方法
html <div class="item-input code-box"><input type="text" class="us ...
vue element-ui 手机号校验验证码校验获取验证码倒数60秒无样式实现
这段时间被迫搞前端搞裂开了,记录一下手机号验证码校验登录的极简无样式前端实现巨丑!希望大佬们不介意下面是先演示效果点击登陆后显示校验信息输入手机号点击获取验证码输入符合校验的内容后点击登录提 ...
js 验证码倒计时60秒
<input type="button" id="btn" value="免费获取验证码" /> <script type ...
Vue - 实现获取手机验证码倒计时 60 秒（手机号+验证码登录功能）
前言网上的大部分获取验证码逻辑的例子,代码多还不健壮,本文将用最少的代码实现相同的功能. 当点击获取验证码按钮时,会自动进入倒计时,同时按钮无法点击, 您可以自定义倒计时时间,如下图所示: 这块由于 ...
jQuery 点击获取验证码,倒计时30秒
//HTML: <div class="layui-form-item"> <input class="layui-yanzheng" ...
微信小程序 - 倒计时60秒(获取验证码)
因为写这个功能的时候我也是个新手,所以并没有抽取class和js~ 或许也正是因此,新手看起来会更简单一些 ~ Make a little progress every day ~ 实现效果功能版 ...
vue+elementui 实现点击验证码出现60秒倒计时
vue+elementui 实现点击验证码出现60秒倒计时 div部分 <div class="verCode@click="getVerCode":disable ...

获取验证码倒计时60秒

获取验证码倒计时60秒相关推荐

最新文章

热门文章