Ionic学习日记实现验证码倒计时


Posted in Javascript onFebruary 08, 2018

前言

要做一个app的话,肯定会涉及到这个功能,所以就从网上找了许多前辈的资料,找到了一个最适合自己并且方便理解的实现此功能,写此日记方便未来自己复习和其他人学习

思路

在用户注册的时候,时下不少app都选择了绑定手机号注册,这是一个非常好的想法,便捷用户操作,也很方便遵循实名制的问题,在设计按钮的时候,需要让他显示在输入验证码的旁边,并在用户点击后,开始倒计时,并将按钮变成无法点击效果

Ionic学习日记实现验证码倒计时

点击前

Ionic学习日记实现验证码倒计时

点击后

在本篇日记中只涉及到1个page下的文件,包括html、ts和scss(我的页面名为reg,可根据自己的具体情况进行调整)

在reg.ts定义在html中可以获取到的信息

//验证码倒计时
 verifyCode: any = {
  verifyCodeTips: "获取验证码",
  countdown: 60,
  disable: true
 }

reg.html设计布局

上面的图片是我自己设计的,这里只取关键代码

<button item-right ion-button clear (click)="getCode()" [disabled]="!verifyCode.disable">{{verifyCode.verifyCodeTips}}</button>

点击事件getCode(),设置[disabled]是否可以点击按钮,用boolean值判断,主要显示的内容是verifyCode.verifyCodeTips,即文本信息和之后需要实现的倒计时

reg.ts添加方法和倒计时处理

当点击button后将触发getCode()方法,触发该方法后首先将disable的值改变为false,将按钮设为不可点击,然后触发settime方法

getCode() {
  //点击按钮后开始倒计时
  this.verifyCode.disable = false;
  this.settime();
 }

settime()具体实现倒计时功能

//倒计时
 settime() {
  if (this.verifyCode.countdown == 1) {
   this.verifyCode.countdown = 60;
   this.verifyCode.verifyCodeTips = "获取验证码";
   this.verifyCode.disable = true;
   return;
  } else {
   this.verifyCode.countdown--;
  }
  this.verifyCode.verifyCodeTips = "重新获取"+this.verifyCode.countdown+"秒";
  setTimeout(() => {
   this.verifyCode.verifyCodeTips = "重新获取"+this.verifyCode.countdown+"秒";
   this.settime();
  }, 1000);
 }

用每过1秒计数器减1,简单的倒计时功能,重要的是判断计数器是否为1,当为1后就将verifyCode的3个信息重新初始化

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

Javascript 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 #Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 #Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 #Javascript
Vue组件通信的四种方式汇总
Feb 08 #Javascript
Vue Socket.io源码解读
Feb 07 #Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 #Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 #Javascript
You might like
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
基于Vue实例对象的数据选项
2017/08/09 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
预备党员党校学习自我评价分享
2013/11/12 职场文书
教师自我鉴定
2013/12/13 职场文书
个人对照检查材料
2014/02/12 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
谢师宴家长致辞
2015/07/27 职场文书
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python