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 相关文章推荐
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
基于Vue实现图书管理功能
Oct 17 Javascript
Vue 幸运大转盘实现思路详解
May 06 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
原生JS实现pc端轮播图效果
Dec 21 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简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
window.onload使用指南
2015/09/13 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
Python中的super()方法使用简介
2015/08/14 Python
Python中字典的基础知识归纳小结
2015/08/19 Python
利用python批量检查网站的可用性
2016/09/09 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
html5启动原生APP总结
2020/07/03 HTML / CSS
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
车辆委托书范本
2014/10/05 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书