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 相关文章推荐
extjs fckeditor集成代码
May 10 Javascript
jQuery select操作控制方法小结
May 26 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 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
多数据表共用一个页的新闻发布
2006/10/09 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
活动总结报告格式
2014/05/09 职场文书
计算机专业自荐信
2014/05/24 职场文书
优秀班主任申报材料
2014/12/16 职场文书
研究生导师评语
2014/12/31 职场文书
2015年考研复习计划
2015/01/19 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
Java8中接口的新特性使用指南
2021/11/01 Java/Android
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS