前端学习——ionic/AngularJs——获取验证码倒计时按钮
按钮功能为:点击“获取验证码”——按钮不可用-设置倒计时-60秒后重新获取。
代码借鉴于:http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p=preview
主要实现原理:点击后,设置一个$interval,每一秒更改一次剩余时间,并依赖Angular数据绑定实时显示在页面中。设置一个$timeout,60秒后将按钮初始化到可用状态。
实现代码:
(1)js代码,设置成一个directive以便多次调用。
angular.module('winwin').directive('timerbutton', function($timeout, $interval){
return {
restrict: 'AE',
scope: {
showTimer: '=',
timeout: '='
},
link: function(scope, element, attrs){
scope.timer = false;
scope.timeout = 60000;
scope.timerCount = scope.timeout / 1000;
scope.text = "获取验证码"; scope.onClick = function(){
scope.showTimer = true;
scope.timer = true;
scope.text = "秒后重新获取";
var counter = $interval(function(){
scope.timerCount = scope.timerCount - 1;
}, 1000); $timeout(function(){
scope.text = "获取验证码";
scope.timer = false;
$interval.cancel(counter);
scope.showTimer = false;
scope.timerCount = scope.timeout / 1000;
}, scope.timeout);
}
},
template: '<button on-tap="onClick()" class="button button-calm xgmm-btn" ng-disabled="timer"><span ng-if="showTimer">{{ timerCount }}</span>{{text}}</button>'
};
});
(2)html代码
<timerbutton show-timer="false">获取验证码</timerbutton>
实现效果:
(1)点击之前
(2)点击之后
干货:
<html ng-app="myApp">
<head>
<title>测试_短信验证码</title>
<meta charset="utf-8" />
</head>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"/>
<body>
<timerbutton show-timer="false">获取验证码</timerbutton>
</body>
</html>
<script>
angular.module('myApp',[]).directive('timerbutton', function($timeout, $interval){
return {
restrict: 'AE',
scope: {
showTimer: '=',
timeout: '='
},
link: function(scope, element, attrs){
scope.timer = false;
scope.timeout = 60000;
console.log("1-进来了");
scope.timerCount = scope.timeout / 1000;
scope.text = "获取验证码"; scope.onClick = function(){
console.log("2-进来了");
scope.showTimer = true;
scope.timer = true;
scope.text = "秒后重新获取";
var counter = $interval(function(){
scope.timerCount = scope.timerCount - 1;
console.log("3-进来了");
}, 1000); $timeout(function(){
console.log("进来了");
scope.text = "获取验证码";
scope.timer = false;
$interval.cancel(counter);
scope.showTimer = false;
scope.timerCount = scope.timeout / 1000;
}, scope.timeout);
}
},
template: '<button ng-click="onClick()" class="btn btn-primary" ng-disabled="timer"><span ng-if="showTimer">{{ timerCount }}</span>{{text}}</button>'
};
});
</script>
前端学习——ionic/AngularJs——获取验证码倒计时按钮的更多相关文章
- Android中注册获取验证码倒计时按钮
public class CountDownTimerUtils extends CountDownTimer { private TextView mTextView; /** * @param t ...
- Andorid实现点击获取验证码倒计时效果
这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文 我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...
- iOS 短信验证码倒计时按钮的实现
验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器, ...
- Android 获取验证码倒计时实现
Android 获取验证码倒计时实现 2017年10月24日 09:55:41 FBY展菲 阅读数:2002 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...
- angular中service封装$http做权限时拦截403等状态及获取验证码倒计时、跨域问题解决
封装$http.做权限时拦截403等状态及获取验证码倒计时: 拦截接口返回状态 var app = angular.module('app'); app.factory('UserIntercepto ...
- clips 前端 js 倒计时 获取验证码的按钮
<a href="javascript:void(0);" onclick="get_captcha()" class="btn btn-def ...
- js点击按钮获取验证码倒计时
//发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { ...
- android学习小例子——验证码倒计时按钮
1.activity_main.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andro ...
- iOS开发之--获取验证码倒计时及闪烁问题解决方案
大家在做验证码的时候一般都会用到倒计时,基本上大家实现的方式都差不多,先贴出一些代码来.. -(void)startTime{ __block ; //倒计时时间 dispatch_queue_t q ...
随机推荐
- css优先级汇总
原文:css优先级汇总 我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题. 多重样式优先级:当内联样式.内部样式和外部样式作用于同一个元素时,属于多重样式的范畴 ...
- android application简要类(一)
每次应用程序执行.应用application保持实例化的阶级地位.推而广之applicaiton类别,能够完成以下3长期工作: 1.至android应用级事件,如广播的实现中低声回应. 2.传递应用程 ...
- linux服务创建及jq配置服务列表查看
1.应用背景 随着业务需求,后台处理服务不断增多,对于这些服务或后台程序的查看.更新操作越来越凌乱,所以我们首先需要一个服务列表查看工具,方便查看各 服务的端口.运行状态.jar包路径等等. 2.创建 ...
- JavaScript实例技巧精选(12)—计算星座与属相
>>点击这里下载完整html源码<< 这是截图: 核心代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- ...
- 让大蛇(Python)帮你找工作
前段时间用Python实现了一个网络爬虫(让大蛇(Python)帮你找工作),效率总体还可以,但是缺点就是每次都需要手动的去触发,于是打算对该爬虫加上Timer,经过网上一番搜索以及API的查询,发现 ...
- VS2013全攻略(安装,技巧,快捷键,插件)!
工欲善其事,必先利其器.VS2013全攻略(安装,技巧,快捷键,插件)! 之前一篇<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥>承蒙大家喜爱和编辑推荐,在此 ...
- 实现WebService的调用与被调用
之前一直用WCF来开发服务,可是从未用过WebService.对WebService有种很神奇的期待,都说WebService比较简单,但是从未用过就对我来说就是一种新的知识.起始让我来说WCF与We ...
- 够快网盘支持与iOS-ASIHTTPRequest框架学习
够快网盘支持与iOS-ASIHTTPRequest框架学习 前段时间在公司的产品中支持了够快网盘,用于云盘存储. 在这个过程中,学习到了很多新的知识,也遇到了很多问题,在此记录一下. 首先就够快的AP ...
- github 出现 Permission denied (publickey)的解决
从github上clone的时候出现了以下错误 应该是ssh key过期了,试着重新创建ssh key,按以下步骤 1. 注意短横线前后都没有空格 接着一切都默认,它会在把ssh key 储存在 C ...
- [转]Top 10 DTrace scripts for Mac OS X
org link: http://dtrace.org/blogs/brendan/2011/10/10/top-10-dtrace-scripts-for-mac-os-x/ Top 10 DTra ...