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 时间比较实现代码
Oct 28 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 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
PHP的面试题集,附我的答案和分析(一)
2006/11/19 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
PHP加密技术的简单实现
2016/09/04 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
jquery中实现标签切换效果的代码
2011/03/01 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
jQuery实现增删改查
2020/12/22 jQuery
Python模块学习 datetime介绍
2012/08/27 Python
linux下python抓屏实现方法
2015/05/22 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
金智子午JAVA面试题
2015/09/04 面试题
环境工程毕业生自荐信
2013/11/17 职场文书
房地产广告策划方案
2014/05/15 职场文书
开展创先争优活动总结
2014/08/28 职场文书
滴水洞导游词
2015/02/10 职场文书
总经理致辞
2015/07/29 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python