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 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 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 静态变量的初始化
2009/11/15 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python进阶教程之模块(module)介绍
2014/08/30 Python
python文件操作相关知识点总结整理
2016/02/22 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
立志成才演讲稿
2014/09/04 职场文书
入股合作协议书
2014/10/12 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
python实现高效的遗传算法
2021/04/07 Python
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python