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 相关文章推荐
javascript 跳转代码集合
Dec 03 Javascript
javascript 鼠标拖动图标技术
Feb 07 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
JS实现商品筛选功能
Aug 19 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 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设计模式之责任链模式的深入解析
2013/06/13 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
javascript arguments使用示例
2014/12/16 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
iscroll实现下拉刷新功能
2017/07/18 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
python获取图片颜色信息的方法
2015/03/18 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
如何在Django项目中引入静态文件
2019/07/26 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
港湾网络笔试题
2014/04/19 面试题
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
环保建议书300字
2014/05/14 职场文书
投标服务承诺书
2014/05/28 职场文书
会计学自荐信
2014/06/03 职场文书
商铺门前三包责任书
2014/07/25 职场文书
终止劳动合同通知书
2015/04/16 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js