页面上

<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)public class Exse3 { static int iCounter = 0; String name; boolean bGender = false; int iAge; doub ...

  2. VMware Workstation下ubuntu虚拟机无法上网连不上网络解决

    写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...

  3. [学习] 从 函数式编程 到 lambda演算 到 函数的本质 到 组合子逻辑

    函数式编程 阮一峰 <函数式编程初探>,阮一峰是<黑客与画家>的译者. wiki <函数编程语言> 一本好书,<计算机程序的构造与解释>有讲到schem ...

  4. android studio/Intellij IDEA(MAC OSX)中android模拟器无法启动的一种原因

    翻了stackoverflow上好多方式,各种重装重启清理缓存,都没有效果. 后来发现,用IDEA创建的模拟器的路径是 /Users/xirtam/.android/avd 而IDE使用的路径是 AN ...

  5. 如何生成Junit报告

    前言: 对Eclipse的工程写单元测试: 1. 一个工程有多个测试类,将测试类放到一个测试包下. 2. 每一个测试类写好,都单独执行run as ->JUnit Test测一下.    3. ...

  6. REST风格的5条关键原则

    REST风格的5条关键原则包括: (1)网络上的所有事物都被抽象为资源. (2)每个资源对应一个唯一的资源标识. (3)通过通用的连接件接口对资源进行操作. (4)对资源的各种操作不会改变资源标识. ...

  7. IO调度算法的选择

    一) I/O调度程序的总结 1) 当向设备写入数据块或是从设备读出数据块时,请求都被安置在一个队列中等待完成. 2) 每个块设备都有它自己的队列. 3) I/O调度程序负责维护这些队列的顺序,以更有效 ...

  8. Linux 防火墙:Netfilter iptables

    一.Netfilter 简介 (1) Netfilter 是 Linux 内置的一种防火墙机制,我们一般也称之为数据包过滤机制,而 iptables 只是操作 netfilter 的一个命令行工具(2 ...

  9. Redis入门到高可用(十八)—— 主从复制

    一.单机有什么问题 1.机器故障 2.容量瓶颈 3.QPS瓶颈 二.主从复制 1.数据副本(高可用.分布式基础) 2.拓展读性能(读写分离)  简单总结: 三.主从复制配置 四.主从复制配置-实验演示 ...

  10. java框架之SpringCloud(7)-Config分布式配置中心

    前言 分布式系统面临的配置问题 微服务意味着要将单体应用中的业务拆分成一个个子服务,每个服务的粒度相对较小,因此系统中标会出现大量的服务.由于每个服务都需要必要的配置信息才能运行,所以一套集中式的.动 ...