按钮功能为:点击“获取验证码”——按钮不可用-设置倒计时-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——获取验证码倒计时按钮的更多相关文章

  1. Android中注册获取验证码倒计时按钮

    public class CountDownTimerUtils extends CountDownTimer { private TextView mTextView; /** * @param t ...

  2. Andorid实现点击获取验证码倒计时效果

    这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文   我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...

  3. iOS 短信验证码倒计时按钮的实现

    验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器, ...

  4. Android 获取验证码倒计时实现

    Android 获取验证码倒计时实现 2017年10月24日 09:55:41 FBY展菲 阅读数:2002    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...

  5. angular中service封装$http做权限时拦截403等状态及获取验证码倒计时、跨域问题解决

    封装$http.做权限时拦截403等状态及获取验证码倒计时: 拦截接口返回状态 var app = angular.module('app'); app.factory('UserIntercepto ...

  6. clips 前端 js 倒计时 获取验证码的按钮

    <a href="javascript:void(0);" onclick="get_captcha()" class="btn btn-def ...

  7. js点击按钮获取验证码倒计时

    //发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { ...

  8. android学习小例子——验证码倒计时按钮

    1.activity_main.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andro ...

  9. iOS开发之--获取验证码倒计时及闪烁问题解决方案

    大家在做验证码的时候一般都会用到倒计时,基本上大家实现的方式都差不多,先贴出一些代码来.. -(void)startTime{ __block ; //倒计时时间 dispatch_queue_t q ...

随机推荐

  1. React JSX语法说明

    原文:http://my.oschina.net/leogao0816/blog/379487 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代 ...

  2. 110. Balanced Binary Tree

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  3. Javascript中常用事件的命名

    OnClick :单击事件 OnChange:改变事件 OnSelect:选中事件 OnFocus:获得焦点事件 OnBlur:失去焦点事件 Onload:载入文件 OnUnload:卸载文件 anc ...

  4. 【转载】C代码优化方案

    C代码优化方案 1.选择合适的算法和数据结构2.使用尽量小的数据类型3.减少运算的强度 (1)查表(游戏程序员必修课) (2)求余运算 (3)平方运算 (4)用移位实现乘除法运算 (5)避免不必要的整 ...

  5. TestFlight使用方法

    1 说明 目前IOS版本APP上架前,很少有项目对上架包进行测试,而上架包是人工打包的,很有可能之前的测试包没有问题,可打出的上架包出现问题.苹果市场是有提供对上架包内部测试的,可以对上架包进行测试, ...

  6. 简述ADO中如何使用参数化的命令对象以及增删改查,存储过程的操作

    连接数据库代码: private SqlConnection con = null; public void OpenConnection(string connectionString) { con ...

  7. SQLServer基础之数据页类型:GAM,SGAM,PFS

    简介 我们已经知道SQL Server IO最小的单位是页,连续的8个页是一个区.SQL Server需要一种方式来知道其所管辖的数据库中的空间使用情况,这就是GAM页和SGAM页. GAM页 GAM ...

  8. 自学Python之路-Python并发编程+数据库+前端

    自学Python之路-Python并发编程+数据库+前端 自学Python之路[第一回]:1.11.2 1.3

  9. Processing 与 C 相同和不同的地方

    Processing 与 C Processing 语言和其他语言有很多相似之处,这是它作为一种计算机语言的特征,同时,Processing 用于艺术创作,所以也有一些专用的函数. 相同的几点: 作为 ...

  10. Ansible Playbook 使用循环语句

    如下,with_items 是循环的对象,with_items 是 python list 数据结构,task 会循环读取 list 里面的值,key 的名称是 item [root@localhos ...