页面上

<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. Hadoop开发环境配置1-maven安装配置

    1.下载maven安装包:apache-maven-3.3.9-bin.zip 下载地址: http://archive.apache.org/dist/maven/maven-3/3.3.9/bin ...

  2. 手机连接wamp网页

    1.改变wamp的put online 状态 Right click Wampmanager -> WAMPSetting -> Menu Item: Online/Offline

  3. 19.0-uC/OS-III内存管理

    内存管理 uC/OS-III可以获得连续的内存块.内存块大小可以相同, 所有的内存分 区包含了整数个内存块. 在特定的时间执行内存块的分配和释放.内存分 区以内存块数组的形式被静态分配的.如果分配后不 ...

  4. 基于Spark Streaming + Canal + Kafka对Mysql增量数据实时进行监测分析

    Spark Streaming可以用于实时流项目的开发,实时流项目的数据源除了可以来源于日志.文件.网络端口等,常常也有这种需求,那就是实时分析处理MySQL中的增量数据.面对这种需求当然我们可以通过 ...

  5. 运行pytorch代码遇到的error解决办法

    1.no CUDA-capable device is detected 首先考虑的是cuda的驱动问题,查看gpu显示是否正常,然后更新最新的cuda驱动: 第二个考虑的是cuda设备的默认参数是否 ...

  6. C语言进阶之路(二)----字符串操作常见模型

    1.while模型 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #includ ...

  7. window中的attrib命令

    attrib -s -h -r autorun.infattrib +s +h +r autorun.infattrib -s -h -r my.icoattrib +s +h +r my.ico

  8. C++重载操作符自增自减

    #include <iostream> using namespace std; class Test { friend ostream& operator<<(ost ...

  9. RocketMQ使用笔记

    apache rocketmq document : http://rocketmq.apache.org/community/ rocketmq 工具下载地址:https://github.com/ ...

  10. Dvelopment descriptor

    部署描述符是JavaEE程序常见的一部分,但是之前都没有较为全面的学习过,这里就较为全面的记录一下部署描述符中的元素.部署一个Servlet 3 或以上应用程序是一件轻而易举的事.通过Servlet注 ...