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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
js 巧妙去除数组中的重复项
Jan 25 Javascript
JavaScript类和继承 prototype属性
Sep 03 Javascript
Textarea与懒惰渲染实现代码
Jan 04 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
jsPDF导出pdf示例
May 02 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
vue自定义右键菜单之全局实现
Apr 09 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
PHP脚本的10个技巧(2)
2006/10/09 PHP
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
PHP的引用详解
2015/02/22 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
写gulp遇到的ES6问题详解
2018/12/03 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
python实现apahce网站日志分析示例
2014/04/02 Python
python概率计算器实例分析
2015/03/25 Python
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
python Flask实现restful api service
2017/12/04 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
Python socket服务常用操作代码实例
2020/06/22 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
介绍一下JMS编程步骤
2015/09/22 面试题
自我评价的正确写法
2013/09/19 职场文书
如何写求职信
2014/05/24 职场文书
大学生学期个人总结
2015/02/12 职场文书