Angular6 发送手机验证码按钮倒计时效果实现方法


Posted in Javascript onJanuary 08, 2019

1.组件中定义两个变量,分别用于控制按钮是否可以点击(countDown)和按钮上的倒计时数字(countDownTime):

countDown = false;
countDowmTime = 60; // 这里设置倒计时为60S
showButtonText = '发送短信验证码'; // 可以控制动态改变的按钮提示信息

2.写一个获取短信验证码的方法绑定到页面的获取短信验证码按钮上:

getCode(event) { 
 this.validateForm1.controls['phone'].markAsDirty();           // 点击获取验证码要以输入了手机号为前提 
 this.validateForm1.controls['phone'].updateValueAndValidity();
  this.userProvider.doSendSMS ({ phone: this.validateForm1.controls.phone.value }).subscribe(res =>{   // 如果手机号验证通过
     if (res) { 
      this.notice.success('短信验证码已发送!');
      this.sendMessage();   // 调用下面的按钮倒计时的方法
 
        } 
       }); 
   }
 
sendMessage() {   // 发送了短信验证码后触发本方法,开始倒计时 
  this.countDown = true;                // 发送验证码后一分钟内,按钮变成不可点击状态 
  this.showButtonText = '验证码已发送(' +60+ 's)';           // 验证码发送后的初始状态 
  const start = setInterval(() = > { 
     if (this.countDownTime >=0 ) {
        this.showButtonText = '验证码已发送(' + this.countDownTime-- + 's)';     // 动态的进行倒计时
         } else { 
             clearInterval(start);             // 如果超时则重新发送 
             this.showButtonText = '重新发送'; 
             this.countDown = false;         // 按钮再次变成可点击状态
             this.countDownTime = 60; 
            } 
       }, 1000);
   }

3.页面上用方法中的变量来控制按钮的显示效果:

<div style="text-align:center"> 
   <button nz-button [disabled]="countDown" (click)="getCode($event)">{{showButtonText}}</button> 
..... 
</div>

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

Javascript 相关文章推荐
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
vue更改数组中的值实例代码详解
Feb 07 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 #Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 #Javascript
关于微信小程序登录的那些事
Jan 08 #Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 #Javascript
关于React动态加载路由处理的相关问题
Jan 07 #Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 #Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 #Javascript
You might like
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
python里将list中元素依次向前移动一位
2014/09/12 Python
Python中给List添加元素的4种方法分享
2014/11/28 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
公司演讲稿开场白
2014/08/25 职场文书
道德模范事迹材料
2014/12/20 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
gojs实现蚂蚁线动画效果
2022/02/18 Javascript