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 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
深入解析Vue 组件命名那些事
Jul 18 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 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
构建简单的Webmail系统
2006/10/09 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
php生成二维码
2015/08/10 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
vue按需加载实例详解
2019/09/06 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
Ubuntu下安装PyV8
2016/03/13 Python
python中logging包的使用总结
2018/02/28 Python
Python实现微信小程序支付功能
2019/07/25 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
认购协议书范本
2014/04/22 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
博物馆观后感
2015/06/05 职场文书
少年犯观后感
2015/06/11 职场文书
公司周年庆寄语
2019/06/21 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python