页面上

<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. 自动微分(AD)学习笔记

    1.自动微分(AD) 作者:李济深链接:https://www.zhihu.com/question/48356514/answer/125175491来源:知乎著作权归作者所有.商业转载请联系作者获 ...

  2. git pull 冲突拉取不到新的代码

    本地文件已经有冲突或者在pull的过程中拉取的文件和本地文件冲突时,拉取不到新的代码,git pull出现报错,如下: 这个时候,如果你有两种选择,如果你需要这些改动,那个你就需要手动解决冲突,然后a ...

  3. enzyme design 整体流程及感想

    想起什么来写什么吧. 整体流程(以Ceas2, TPP, G3P为例): 准备蛋白即配体参数文件: 设置CST文件: 准备protocol和flag文件: 运行enzyme_design: 结果处理. ...

  4. wingIDE Pro6 破解教程

    亲测wingIDE pro6.0.6-1激活成功 算号器下载 激活的时候选择第三项 打开算号器,获得license id 把算号器里的license id输入到第一步的输入框里 continue得到r ...

  5. shell bash-shell

    bash shell中的命令替换,`cmd`或者$(cmd). bash shell中的变量赋值,直接name = var:  (bash中的变量赋值不能中间有空格) 变量引用时,$name,如果na ...

  6. TheFatRat一般使用

    利用它生成后门 第一种通常情况下速度很快,较稳定,但免杀效果极差 推荐使用第二种 免杀效果好,如下图 第一种是最新的模块,较免杀效果极好.还可伪造图标 第二种是旧的

  7. Godot必须明确掌握的概念与知识

    本文对godot必须掌握的概念进行罗列,以便于浏览学习: (随时补充) 1.场景 2.节点 X:场景与节点 3.脚本(建议直接学习GDscript,当然掌握C#也可以) 4.类

  8. Kindle:自动追更之云上之旅

    2017年5月27: 原来的程序是批处理+Python脚本+Calibre2的方式,通过设定定时任务的方式,每天自动发动到自己的邮箱中.缺点是要一直开着电脑,又不敢放到服务器上~~ 鉴于最近公司查不关 ...

  9. Kubernetes-Host网络模式应用

    目录贴:Kubernetes学习系列 在实际生产环境中,有些容器内应用(比如编码器)需要用到物理层面的网络资源(比如组播流).这就要求Kubernetes中的该Pod以HOST模式来启动.以下实验了K ...

  10. vue不通过路由直接获取url中参数的方法示例

    vue不通过路由直接获取url中参数的方法示例 vuejs取得URL中参数的值地址:http://localhost:3333/#/index?id=128console.log(this.$rout ...