uni-app实现获取验证码倒计时功能


Posted in Javascript onNovember 01, 2020

本文实例为大家分享了uni-app实现获取验证码倒计时的具体代码,供大家参考,具体内容如下

实现的效果

uni-app实现获取验证码倒计时功能

uni-app实现获取验证码倒计时功能

uni-app实现获取验证码倒计时功能

页面部分是一个三目运算,codeTime是倒计时的时间。

<template>
 <view>
 <view class="three">
 <view class="get" @tap="getCheckNum()">
 <text>{{!codeTime?'获取验证码':codeTime+'s'}}</text>
 </view>
 <view class="all">
 <view class="left">验证码</view>
 <input v-model="mydata.checkNum" placeholder="请输入验证码"/>
 </view>
 <button class="btn" @tap='sure'>确认</button>
 </view>
 </view>
</template>

具体思路:

三目运算,判断codeTime的值,当为0的时候显示文字“获取验证码”,大于0的时候显示验证码的倒计时。codeTime默认为0.

这里有个问题就是,怎么阻止用户在倒计时还没结束的时候一直点击,影响倒计时。

解决办法是写个判断,当codeTime大于60的时候,弹窗提示用户不能重复获取验证码。当倒计时运行完了之后要清除倒计时。

代码:

<script>
 export default {
 data() {
 return {
  codeTime:0,
 }
 },
  methods: {
   getCheckNum(){
 if(this.codeTime>0){
  uni.showToast({
  title: '不能重复获取',
  icon:"none"
  });
  return;
 }else{
  this.codeTime = 60
  let timer = setInterval(()=>{
  this.codeTime--;
  if(this.codeTime<1){
  clearInterval(timer);
  this.codeTime = 0
  }
  },1000)
    }
   }
  }
}

css样式:

.all{
 margin: 30rpx;
 border-bottom: 2rpx solid #EEEEEE;
 display: flex;
 flex-wrap: nowrap;
}
.left{
 margin-bottom: 30rpx;
 margin-right: 40rpx;
 width: 150rpx;
}
.three{
 background-color: white;
 width: 92%;
 border-radius: 10rpx;
 padding: 20rpx 0;
 margin: 20rpx auto;
 position: relative;
}
.btn{
 background-color: orange;
 font-size: 28rpx;
 width: 160rpx;
 height: 70rpx;
 line-height: 70rpx;
 margin-top: 40rpx;
 color: white;
 font-weight: 600;
}
.get{
 position: absolute;
 top: 40rpx;
 right: 30rpx;
 background-color: orange;
 height: 70rpx;
 line-height: 70rpx;
 color: white;
 border-radius: 10rpx;
 padding: 0 20rpx;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 #Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 #Javascript
微信小程序实现星星评分效果
Nov 01 #Javascript
Express 配置HTML页面访问的实现
Nov 01 #Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 #Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 #Javascript
Ant design vue中的联动选择取消操作
Oct 31 #Javascript
You might like
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
php支付宝接口用法分析
2015/01/04 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
Python多线程学习资料
2012/12/19 Python
python检测服务器是否正常
2014/02/16 Python
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
关于Python-faker的函数效果一览
2019/11/28 Python
Django设置Postgresql的操作
2020/05/14 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
大学生职业生涯规划方案
2014/01/03 职场文书
保险经纪人求职信
2014/03/11 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL
Python中的 No Module named ***问题及解决
2022/07/23 Python