在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> ...
随机推荐
- SqlHelper2
public abstract class DBHelper { public static string connectionString = @"DATA SOURCE=.\sqldat ...
- java框架之Struts2(3)-OGNL&ValueStack
OGNL 概述 OGNL 是 Object-Graph Navigation Language 的缩写,它是一种第三方的.功能强大的表达式语言,通过它简单一致的表达式语法,可以存取对象的任意属性,调用 ...
- js格式化时间的方法
方法一:用js格式化时间的方法. Date.prototype.format =function(format) { var o = { "M+" : this.getMonth( ...
- python进阶之 网络编程
1.tcp和udp协议的区别 TCP协议 面向连接\可靠\慢\对传递的数据的长短没有要求 两台机器之间要想传递信息必须先建立连接 之后在有了连接的基础上,进行信息的传递 可靠 : 数据不会丢失 不会重 ...
- maven pom添加oracle11驱动
参考这篇文章 https://blog.csdn.net/youren_zt/article/details/60132324 OracleJDBC驱动包是需要Oracle官方授权才能被下载.mave ...
- [渣译文] 使用 MVC 5 的 EF6 Code First 入门 系列:建立一个EF数据模型
英文渣水平,大伙凑合着看吧…… 这是微软官方教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译,这里是第一篇: ...
- 024-母版页MasterPage
网站的布局通常是统一的,上面是Logo.菜单条.下面是公司地址.版权声明等.如果每个页面都重复做这些功能的话:重复性劳动.一旦修改那么每个页面都要修改..Net中一般用母版(MasterPage)技术 ...
- Filte过滤器
过滤器 , 其实就是对客户端发出来的请求进行过滤. 浏览器发出, 然后服务器派servlet处理. 在中间就可以过滤, 其实过滤器起到的是拦截的作用.生活中的过滤器例如:门禁,你有门卡才能过去,没有 ...
- MySQL变量的使用
在mysql文档中,mysql变量可分为两大类,即系统变量和用户变量. 但根据实际应用又被细化为四种类型,即局部变量.用户变量.会话变量和全局变量. 一.局部变量 mysql局部变量,只能用在begi ...
- 完成登录功能,用session记住用户名
登录功能完成: js:设置return html:设置 form input py: @app.route设置methods GET POST 读取表单数据 查询数据库 用户名密码对: 记住用户名 跳 ...