页面上

<button class="code" (click)="getCode()" [disabled]="!verifyCode.disable">{{verifyCode.verifyCodeTips}}</button>
//getCode()为点击按钮运行的方法

ts中

//验证码倒计时 全局定义变量
verifyCode: any ={
verifyCodeTips: "获取验证码",
countdown: 60,//总共时间
disable: true
}; //获取验证码的方法
getCode(){
//每次点击时初始化
this.verifyCode = {
verifyCodeTips: "获取验证码",
countdown: 60,//总共时间
disable: true //禁止按钮被点击
}
this.settime()
} //倒计时
settime() {
if(this.verifyCode.countdown == 0) {
this.verifyCode.verifyCodeTips = "获取验证码";
this.verifyCode.disable = true;
return;
} else {
this.verifyCode.countdown--;
}
setTimeout(() => {
this.verifyCode.verifyCodeTips = "重新获取" + this.verifyCode.countdown + "秒";
this.settime();
}, 1000);
}

具体可参考:https://blog.csdn.net/changzhengcome/article/details/79162333

在ionic中使用短信验证码倒计时的更多相关文章

  1. jQuery获取短信验证码+倒计时实现

    jQuery 短信验证码倒计时 <script type="text/javascript" charset="utf-8"> $(function ...

  2. android 获取短信验证码倒计时

    android 获取短信验证码倒计时 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWVuZ2xlbGUxMzE0/font/5a6L5L2T/fonts ...

  3. js 发送短信验证码倒计时

    html <input type="button" id="btn" value="免费获取验证码" onclick="se ...

  4. Yii2在Form中处理短信验证码的Validator,耦合度最低的短信验证码验证方式

    短信验证码在目前大多数web应用中都会有,本文介绍一个基于Yii2 Validator方式的验证码验证方式. 在其他文章中看到的方式大多比较难做到一次封装,多次重用. 使用此方式的好处自然不用多说,V ...

  5. 性能测试:Jmeter压测过程中的短信验证码读取

    问题背景 现如今国内的大部分软件或者网站应用,普遍流行使用短信业务,比如登录.注册以及特定的业务通知等. 对于这些业务,在使用Jmeter进行性能测试的过程中,就会需要自动获取和填入短信验证码,否则性 ...

  6. 基于jquery的-获取短信验证码-倒计时

    在制作短信验证的时候,需要做一个获取短信按钮,点击后显示倒计时, html代码如下: <input class="gain" type="button" ...

  7. iOS 短信验证码倒计时按钮的实现

    验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器, ...

  8. 发送短信验证码倒计时,CountDownTimer;

    1.声明CountDownTimer的成员变量: private CountDownTimer countDownTimer; 2.设置倒计时总时间和间隔时间: countDownTimer = ne ...

  9. js,JQ获取短信验证码倒计时

    按钮 <a href="javasript:void(0);"onclick="settime(this);">获取手机验证码</a> ...

随机推荐

  1. 1.7Oob对象的创建局部变量

    1:局部变量不会被系统自动初始化,所以局部变量必须进行初始化操作. 2:break是跳出当前循环体,return是跳出当前循环体和方法 并且结束外围循环体和方法,continue是跳过本次循环 3:创 ...

  2. C和C指针小记(十七)-使用结构和指针-链表

    1.链表 链表(linked list)即使是一些包含数据的独立数据结构的(Node)集合. 链表中的每个节点通过链或指针链接在一起. 程序通过指针访问链表中的节点. 节点通常是动态分配的,但也有由节 ...

  3. Cesium 实践

    详细内容请参考教程:https://www.jianshu.com/p/31c3b55a21eb 该教程翻译自官方英文教程,对入门cesium 帮助很大. 2,Cesium项目实例    实践: 问题 ...

  4. Java加载dll或so库文件的路径 java.library.path

      1. Java的System.load 和 System.loadLibrary都可以用来加载库文件   2.例如你可以这样载入一个windows平台下JNI库文件: System.load(&q ...

  5. 快速搭建完整zabbix3.4

    一.准备工作OS:centos7.4Zabbix version:3.4.6(2018/1/15日上线的新版本)Database:MariaDB关闭防火墙:systemctl stop firewal ...

  6. FQ原理

    笔者在nginx反向代理篇讲了正向代理和反向代理的区别,今天着重讲其中的FQ是实现原理. 一.普遍的两种方式 1.vpn vpn它将客户端的IP数据报经过加密和二次封装后转发出去,客户端通过vpn上网 ...

  7. 为什么分布式数据库中不使用uuid作为主键?

    分布式数据库当然也有主键的需求,但是为什么不直接使用uuid作为主键呢?作为曾经被这个问题困惑过的人,试着回答一下 1. UUID生成速率低下 Java的UUID依赖于SecureRandom.nex ...

  8. [LeetCode] 33. Search in Rotated Sorted Array_Medium tag: Binary Search

    Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...

  9. Hibernate查询操作

    操作前需要创建好Hibernate项目,创建项目,可参考:http://www.cnblogs.com/zhaojinyan/p/9336174.html 一下的例子是从其他贴子粘过来的(知识无国界! ...

  10. windows----------自启动QQ报错”initialization failure:0x0000000C“

    1.从来没遇到过这个问题,不知道为啥最近竟然遇到了两次,家里的电脑和公司的电脑都这样. 通过百度得知答案,并亲自试过了,是正确的解决方法: 原因:上次没有正常关机导致的错误  方法:管理员运行cmd ...