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

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>

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

赞 (0)

相关推荐

  • Ionic + Angular.js实现验证码倒计时功能的方法

    Ionic + Angular.js实现验证码倒计时功能的方法

    前言 之前跟大家分享了关于 Android 原生实现验证码倒计时,地址是这里,现在公司使用 Ionic 开发的 App 也要实现类似的功能,现在也记录下来,供大家参考: 效果图: 正文 首先介绍下与本文相关的概念 $interval $interval 是 window.setInterval 的 Angular 包装形式,函数如果在没有被取消的时候会无限执行.(取消使用 cancel(promise) ) 用法: $interval(fn,delay,[count],[invokeApply]

  • ionic+AngularJs实现获取验证码倒计时按钮

    ionic+AngularJs实现获取验证码倒计时按钮

    按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 主要实现原理:点击后,设置一个$interval,每一秒更改一次剩余时间,并依赖Angular数据绑定实时显示在页面中.设置一个$timeout,60秒后将按钮初始化到可用状态. 实现代码: (1)js代码,设置成一个directive以便多次调用. angular.module('winwin').directive('timerbutton', function($timeout, $interval){

  • AngularJS 验证码60秒倒计时功能的实现

    最近在做AngularJS 项目,这是写的一个60秒倒计时,  angularjs 与jq不同, 不是使用dom节点操作,而是数据操作,写倒计时,最好是使用$timeout与$interval ,不要使用settimeout与setinterval .$timeout与$interval 可使绑定数据直接更新. html <a href="javascript:" rel="external nofollow" ng-click="sendphone

  • Angular.js实现获取验证码倒计时60秒按钮的简单方法

    Angular.js实现获取验证码倒计时60秒按钮的简单方法

    前言 本文主要介绍了关于Angular.js实现获取验证码倒计时60秒按钮的相关内容,关于这个功能相信不用多介绍,大家都不陌生,所以下面话不多说了,来一起看看实现的方法吧. 一.controller中代码 angular.module('controllers') .controller('LoginCtrl', function ($scope, $location,$ionicLoading,$rootScope,$interval,$timeout) { $scope.timer = fa

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

    1.组件中定义两个变量,分别用于控制按钮是否可以点击(countDown)和按钮上的倒计时数字(countDownTime): countDown = false; countDowmTime = 60; // 这里设置倒计时为60S showButtonText = '发送短信验证码': // 可以控制动态改变的按钮提示信息 2.写一个获取短信验证码的方法绑定到页面的获取短信验证码按钮上: getCode(event) { this.validateForm1.controls['phone'

  • django 发送手机验证码的示例代码

    一.流程分析: 1.用户在项目前端,输入手机号,然后点击[获取验证码],将手机号发到post到后台. 2.后台验证手机号是否合法,是否已被占用,如果通过验证,则生成验证码,并通过运行脚本,让短信运营商向该手机号,发送该验证码,如果没通过验证,则返回错误信息 3.用户收到短信验证码以后,再次将所有信息post到后台. 4.后台验证各个数据,通过验证则完成实名制认证,如果没通过则返回错误信息. 总结,一次实名验证,需要两次ajax+post 二.对接短信商: 1.在云片网端: 1.注册云片网 地址:

  • vue实现验证码按钮倒计时功能

    本人最近开始尝试学习vue.js.想使用vue写一个小例子,就选择做验证码按钮倒计时功能. 上网上搜了一下,也把他们的代码试了一下,自己出了很多问题.所以,需要写一篇基础入门的文章,避免后面人采坑. 这是按照网上写的HTML页面 <div class="register-pannel" id ="register-pannel"> <div class="register-l" align="center"&

  • JQuery实现的按钮倒计时效果

    JQuery实现的按钮倒计时效果

    本文实例讲述了JQuery实现的按钮倒计时效果.分享给大家供大家参考,具体如下: 一个实现了在按钮上显示倒计时,倒计时完毕自动将按钮设置为不可用的效果,具体代码如下: <html> <head> <title>test count down button</title> <script src="jquery1.8.3.min.js" type="text/javascript"></script&g

  • iOS 验证码按钮倒计时功能

    iOS 验证码按钮倒计时功能

    在app 注册或者登录 需要验证码的地方.为了避免短时间内刷验证码.往往会加上一层验证. 倒计时结束后.可以重新获取! 代码实现如下: // _CountdownTime 倒计时总时间: //_timer 定时器 - (void)startTime:(UIButton *)VerificationCodeButton { __block NSInteger timeout = [_CountdownTime integerValue]; dispatch_queue_t queue = disp

  • 使用阿里大于(大鱼)平台进行发送手机验证码的流程

    使用阿里大于(大鱼)平台进行发送手机验证码的流程

    昨天看了一篇博文利用阿里云大于平台给手机发送验证码和短信,当时自己就很感兴趣,因为这个技术很有用,相当于以后做用户注册的功能可以进行短信验证,并且大于平台的短信收费也很低,我自己都没有花钱.现在来分享一下我昨天做的流程吧 首先去登录阿里大于: http://www.alidayu.com/ 没有号的就注册一个!用淘宝就可以登录了,相信一般人都是不需要注册的,还可以用支付宝,微博账号登陆,我用的是支付宝扫码登录.在登录成功之后显示下图界面. 点击页面的控制台,然后会跳到另一个页面,然后你会看大使用

  • Java实现SMS短信通发送手机验证码案例讲解

    Java实现SMS短信通发送手机验证码案例讲解

    注册网建短信通账号 链接:http://sms.webchinese.cn/ 设置短信签名 注意不要乱写别的公司等,会被视为诈骗信息 设置短信密钥,发送时代替密码 Java方式实现 导入依赖 commons-httpclient-3.1.jar 编写SmsUtil工具类 import org.apache.commons.httpclient.HttpClient; import org.apache.commons.httpclient.NameValuePair; import org.ap

  • Redis模仿发送手机验证码功能

    Redis模仿发送手机验证码功能

    流程图 一:添加jedis依赖包 二:测试连接Redis服务是否成功 // 创建Jedis对象用于连接Redis服务(在服务器上通过redis-server需要指定配置文件:redis-server /etc/redis.conf) Jedis jedis = new Jedis("192.168.119.128", 6379); String value = jedis.ping(); System.out.println(value); jedis.close(); 三:编写生成验

  • JS基于递归实现倒计时效果的方法

    JS基于递归实现倒计时效果的方法

    本文实例讲述了JS基于递归实现倒计时效果的方法.分享给大家供大家参考,具体如下: 效果: 事件: //发送验证码 $('.js-sms-code').click(function(){ $(this).attr("disabled", "disabled").html("<span style='color:#666'><span id='countdown'>60</span>s 后再试</span>&qu

  • javascript实现下班倒计时效果的方法(可桌面通知)

    javascript实现下班倒计时效果的方法(可桌面通知)

    本文实例讲述了javascript实现下班倒计时效果的方法.分享给大家供大家参考.具体如下: 周末了,搞个下班倒计时,娱乐下. 确保下面三点: 1.非IE浏览器,较高Chrome版本,已开启HTML5桌面通知.具体设置见下面截图 2.将这个HTML放到本地Web服务器上测试,直接双击运行无法弹出桌面通知 顺带提下,这个程序很容易扩展成定时通知. 做这个东西的过程有两点比较纠结,总结下: 1.parseInt("09")返回的是0.正确做法是parseInt("09"

随机推荐