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 multibox 全选
Mar 22 Javascript
jQueryUI的Dialog的简单封装
Jun 07 Javascript
JavaScript为对象原型prototype添加属性的两种方式
Aug 01 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
php foreach、while性能比较
2009/10/15 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
php利用header函数下载各种文件
2016/08/24 PHP
无阻塞加载脚本分析[全]
2011/01/20 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
vue组件tabbar使用方法详解
2018/11/06 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
vue实现购物车列表
2020/06/30 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
Python读取csv文件实例解析
2019/12/30 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
爱心捐助倡议书
2014/05/19 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
同事打架检讨书
2015/05/06 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android