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 相关文章推荐
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
javascript实现智能手环时间显示
Sep 18 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
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+html5基于websocket实现聊天室的方法
2015/07/17 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
JavaScript 继承详解(二)
2009/07/13 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
python3爬取数据至mysql的方法
2018/06/26 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
什么是Python中的顺序表
2020/06/02 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
小班上学期评语
2014/05/05 职场文书
访谈节目策划方案
2014/05/15 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
成绩单评语
2015/01/04 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
教师听课学习心得体会
2016/01/15 职场文书