在ionic中使用短信验证码倒计时
页面上
<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中使用短信验证码倒计时的更多相关文章
- jQuery获取短信验证码+倒计时实现
jQuery 短信验证码倒计时 <script type="text/javascript" charset="utf-8"> $(function ...
- android 获取短信验证码倒计时
android 获取短信验证码倒计时 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWVuZ2xlbGUxMzE0/font/5a6L5L2T/fonts ...
- js 发送短信验证码倒计时
html <input type="button" id="btn" value="免费获取验证码" onclick="se ...
- Yii2在Form中处理短信验证码的Validator,耦合度最低的短信验证码验证方式
短信验证码在目前大多数web应用中都会有,本文介绍一个基于Yii2 Validator方式的验证码验证方式. 在其他文章中看到的方式大多比较难做到一次封装,多次重用. 使用此方式的好处自然不用多说,V ...
- 性能测试:Jmeter压测过程中的短信验证码读取
问题背景 现如今国内的大部分软件或者网站应用,普遍流行使用短信业务,比如登录.注册以及特定的业务通知等. 对于这些业务,在使用Jmeter进行性能测试的过程中,就会需要自动获取和填入短信验证码,否则性 ...
- 基于jquery的-获取短信验证码-倒计时
在制作短信验证的时候,需要做一个获取短信按钮,点击后显示倒计时, html代码如下: <input class="gain" type="button" ...
- iOS 短信验证码倒计时按钮的实现
验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器, ...
- 发送短信验证码倒计时,CountDownTimer;
1.声明CountDownTimer的成员变量: private CountDownTimer countDownTimer; 2.设置倒计时总时间和间隔时间: countDownTimer = ne ...
- js,JQ获取短信验证码倒计时
按钮 <a href="javasript:void(0);"onclick="settime(this);">获取手机验证码</a> ...
随机推荐
- vim diff 使用
1. 可以在用户目录下编辑.vimrc 文件,设置vim格式.如无该文件,添加即可vim ~/.vimrc 内容自己添加set ts=4 "set tabstop=4set nu &q ...
- WebMagic
一.WebMagic的四个组件 1.Downloader Downloader负责从互联网上下载页面,默认使用apache HttpClient作为下载工具 2.PageProcessor 负责解析页 ...
- java开发定时任务执行时间
定时任务执行时间配置详解 Seconds Minutes Hours Day-of-month Month Day-of-Week Year 秒 分 时 天 ...
- Git 在 windows 上面的安装
参考博客: https://blog.csdn.net/xiezhongyuan07/article/details/79411299 将该作者的文章搬过来, 大家可以直接看上面的原文章. 下面是拷贝 ...
- Python记录13:软件开发目录规范
软件开发目录规范 开发一个软件,一个工程项目,一般应该具备以下的几个基本的文件夹和模块,当然,这并不是一成不变的,根据项目的不同会有一定的差异,不过作为一个入门级的新手,建议暂时按照以下的规范编写: ...
- QtQuick多页面切换、多页面切换动画、多个qml文件数据交互
一.QtQuick多页面切换方法 (1)“隐藏法” 前一个视图visible设为false或者透明度opacity设为0,相当于“隐藏”了,实际还存在: 要显示的视图visible设为true或者透明 ...
- GoldenGate抽取Informix数据库安装及配置
GoldenGate抽取Informix数据库安装及配置 本次测试架构 l 在中间机上安装informix csdk4.10版本,并编译配置unixODBC; l 在中间机上安装ogg for I ...
- Linux firewalld 防火墙
Linux firewalld 防火墙 简介 RHEL 7 系统中集成了多款防火墙管理工具,其中 firewalld(Dynamic Firewall Manager of Linux system ...
- Splay详解
平衡树实际很简单的 以下讲解都以Luogu P3369 [模板]普通平衡树为例 我不会带指针的Splay,所以我就写非指针型的Splay Splay是基于二叉查找树(bst)实现的 什么是二叉查找树呢 ...
- 自制操作系统Antz(1)——Boot Sector
0.引子 最近在看操作系统底层方面的东西,最开始的为什么是07c00h这个问题就让我对操作系统有了很大的兴趣.所以准备在看书之余顺便写一个操作系统(Anz).至于为什么这个系统会被叫做Antz,可以参 ...