获取验证码界面效果如图:

需要实现以下逻辑

按钮不可选

--输入电话号码,按钮可选

--点击获取,进入倒计时,按钮不可选

--倒计时结束,回到初识状态

核心代码:

var cd = 60;
var toDo = function() {
cd--;
$scope.countDown = "重新获取 " + cd;
};
$interval(toDo, 1000, 60);

完整代码:

html:

 <form name="form" class="form-validation">
<div class="list-group list-group-sm">
<div class="list-group-item">
<input type="text" placeholder="phone" class="form-control no-border" ng-model="seller.phone" required>
</div>
<div class="list-group-item">
<input style="width: 150px;float: left;border: 1px solid #DDD;"
type="phone" placeholder="4位验证码" class="form-control no-border" ng-model="seller.verification" required>
<button style="width: 150px;float: right;" type="button" class="btn btn-primary btn-block" ng-click="sendVerification()" ng-disabled='!seller.phone||send' >
{{countDown}}
</button>
<div class="clearfix"></div>
</div>
<div class="list-group-item">
<input type="password" placeholder="Password" class="form-control no-border" ng-model="seller.password" required>
</div>
</div>
</form>

js:

app.controller('SignupFormController', [ '$interval', '$scope', '$http', '$state', function( $interval, $scope, $http, $state) {
$scope.countDown = "获取验证码";
$scope.loginmsg="";
$scope.send = false;
$scope.sendVerification = function() {
$http.post('http://localhost:8083/boronManager/seller/verification/' + $scope.seller.phone, {verificationType: 1}).then(function(response) {
var req = response.data;
if(!req.success)
$scope.authError = req.error;
}, function(x) {
$scope.authError = response.data.error;
});
var cd = 60;
var toDo = function() {
$scope.send = true;
cd--;
if(cd < 0) {
cd = "";
$scope.send = false;
}
$scope.countDown = "重新获取 " + cd;
};
$interval(toDo, 1000, 60);
};
}]);

Angular.js 使用获取验证码按钮实现-倒计时的更多相关文章

  1. iOS “获取验证码”按钮的倒计时功能

    iOS 的倒计时有多种实现细节,Cocoa Touch 为我们提供了 NSTimer 类和 GCD 的dispatch_source_set_timer方法去更加方便的使用计时器.我们也可以很容易的的 ...

  2. [RN] React Native 获取验证码 按钮

    React Native 获取验证码 按钮 效果如图: 实现方法: 一.获取验证码 按钮组件 封装 CountDownButton.js "use strict"; import ...

  3. button获取验证码60秒倒计时 直接用

    __block ; __block UIButton *verifybutton = _GetverificationBtn; verifybutton.enabled = NO; dispatch_ ...

  4. angular js 模拟获取后台的数据

    在这里我们把后台的数据用一个.json文件进行代替. 项目的目录结构如下: puDongLibraryLearning----ui-router-learning ---- data-------pe ...

  5. JS 获取验证码按钮改变案例

    HTML代码 <div class="box"> <label for="">手机号</label> <input t ...

  6. 前端学习——ionic/AngularJs——获取验证码倒计时按钮

     按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 代码借鉴于:http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p= ...

  7. JS获取验证码后倒计时不受刷新及关闭影响

    HTML部分 <input type="button" id="code_btn" value="获取验证码"> JS部分 // ...

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

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

  9. iOS点击获取短信验证码按钮

    概述 iOS点击获取短信验证码按钮, 由于 Demo整体测试运行效果 , 整个修改密码界面都已展现, 并附送正则表达式及修改密码逻辑. 详细 代码下载:http://www.demodashi.com ...

随机推荐

  1. linux运维、架构之路-MySQL(一)

    一.数据库管理系统 1.RDBMS关系型数据库特点 ①二维表 ②典型产品Oracle传统企业,MySQL是互联网企业产品 ③数据存取通过SQL ④最大的特点,数据安全性很强(ACID) 2.NoSQL ...

  2. spring mvc 数据校验(bean实体注解实现)

    spring mvc 数据校验 1.添加个jar (jar与一版本会冲突) <dependency> <groupId>com.fasterxml</groupId> ...

  3. mysql DISTINCT语句 语法

    mysql DISTINCT语句 语法 作用:用于返回唯一不同的值. 语法:SELECT DISTINCT 列名称 FROM 表名称.扬州大理石量具 mysql DISTINCT语句 示例 //从表中 ...

  4. Java——常用类(基础类型数据包装类)

    [包装类]   包装类(如Integer.Double等)这些类封装了一个相应的基础数据类型数值,并为其提供了一系列操作.     例如:java.lang.Integer类提供了以下构造方法:   ...

  5. Nginx动静分离-tomcat

    一.动静分离 1.通过中间件将动态请求和静态请求分离. 2.为什么? 分离资源,减少不必要的请求消耗,减少请求延时. 3.场景 还可以利用php,fastcgi,python 等方式 处理动态请求 # ...

  6. DC.p4: programming the forwarding plane of a data-center switch

    Name of article:Dc. p4: Programming the forwarding plane of a data-center switch Origin of the artic ...

  7. websocket 传输数据帧打包 (client端)

    /* Vertion: 0.2.1 date: 2015.8.11 content: gcc 编译通过 */ //websocket 传输数据帧打包 client端 //参数:src 为输入字符串 / ...

  8. 大数据学习第二章、HDFS相关概念

    1.HDFS核心概念: 块 (1)为了分摊磁盘读写开销也就是大量数据间分摊磁盘寻址开销 (2)HDFS块比普通的文件块大很多,HDFS默认块大小为64MB,普通的只有几千kb 原因:1.支持面向大规模 ...

  9. Model 层

    package com.test.mvp.mvpdemo.mvp.v1.model; import com.test.mvp.mvpdemo.mvp.v1.MainContract; import o ...

  10. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_08 Map集合_8_LinkedHashMap集合

    linked