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

　　

<强>前言

　　

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

　　

<>强思路

　　

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

　　

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

　　

点击前 　　

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

　　

点击后 　　

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

　　

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

　　 　　//验证码倒计时 　　verifyCode:任何={ 　　verifyCodeTips:“获取验证码”, 　　倒计时:60, 　　禁用:真 　　} 　　 　　

<强> reg.html设计布局

　　

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

　　

代码如下:
　　& lt;按钮商品ion-button清晰(点击)=癵etCode ()(残疾人)=" ! verifyCode.disable”在{{verifyCode.verifyCodeTips}} & lt;/button>
　　

　　

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

　　

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

　　

当点击按钮后将触发getCode()方法,触发该方法后首先将禁用的值改变为false,将按钮设为不可点击,然后触发凝固时间方法

　　 　　 　　getCode () {//点击按钮后开始倒计时 　　this.verifyCode。禁用=false; 　　this.settime (); 　　} 　　之前 　　 　　

凝固时间()具体实现倒计时功能

　　 　　//倒计时 　　凝固时间(){ 　　如果(this.verifyCode。倒计时==1){ 　　this.verifyCode。倒计时=60; 　　this.verifyCode。verifyCodeTips="获取验证码”; 　　this.verifyCode。禁用=true; 　　返回; 　　其他}{ 　　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个信息重新初始化

　　

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

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