Angular.js 使用获取验证码按钮实现-倒计时
获取验证码界面效果如图:


需要实现以下逻辑
按钮不可选
--输入电话号码,按钮可选
--点击获取,进入倒计时,按钮不可选
--倒计时结束,回到初识状态
核心代码:
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 使用获取验证码按钮实现-倒计时的更多相关文章
- iOS “获取验证码”按钮的倒计时功能
iOS 的倒计时有多种实现细节,Cocoa Touch 为我们提供了 NSTimer 类和 GCD 的dispatch_source_set_timer方法去更加方便的使用计时器.我们也可以很容易的的 ...
- [RN] React Native 获取验证码 按钮
React Native 获取验证码 按钮 效果如图: 实现方法: 一.获取验证码 按钮组件 封装 CountDownButton.js "use strict"; import ...
- button获取验证码60秒倒计时 直接用
__block ; __block UIButton *verifybutton = _GetverificationBtn; verifybutton.enabled = NO; dispatch_ ...
- angular js 模拟获取后台的数据
在这里我们把后台的数据用一个.json文件进行代替. 项目的目录结构如下: puDongLibraryLearning----ui-router-learning ---- data-------pe ...
- JS 获取验证码按钮改变案例
HTML代码 <div class="box"> <label for="">手机号</label> <input t ...
- 前端学习——ionic/AngularJs——获取验证码倒计时按钮
按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 代码借鉴于:http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p= ...
- JS获取验证码后倒计时不受刷新及关闭影响
HTML部分 <input type="button" id="code_btn" value="获取验证码"> JS部分 // ...
- Android 获取验证码倒计时实现
Android 获取验证码倒计时实现 2017年10月24日 09:55:41 FBY展菲 阅读数:2002 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...
- iOS点击获取短信验证码按钮
概述 iOS点击获取短信验证码按钮, 由于 Demo整体测试运行效果 , 整个修改密码界面都已展现, 并附送正则表达式及修改密码逻辑. 详细 代码下载:http://www.demodashi.com ...
随机推荐
- git的fetch
1.git fetch 会从远程分支上下载 2.git pull 会将本地库更新至远程库最新状态
- Quick BI的宝藏工具——交叉表
对于普通的表格展示数据,相信大家都非常熟悉了,今天给大家介绍的是BI领域的分析利器-交叉表,这个在BI分析场景中使用占比最多的分析利器.通过交叉表对数据的承载和管理,用户可以一目了然地分析出各种场景指 ...
- PHP开发工具PHP基础教程
PHP开发 工具PHP基础教程,以下是兄弟连PHP培训小编整理: PHP IDE PHP IDE也不少,主要从几个方面进行筛选: 跨平台(能够同时在windows,mac或者ubuntu上面运 ...
- Linux内核设计与实现 总结笔记(第十章)内核同步方法
一.原子操作 原子操作可以保证指令以原子的方式执行----执行过程不被打断. 1.1 原子整数操作 针对整数的原子操作只能对atomic_t类型的数据进行处理. 首先,让原子函数只接收atomic_t ...
- 死锁(deadlocks)
1.定义 所谓死锁<DeadLock>: 是指两个或两个以上的进程在执行过程中,因争夺资源而造成的一种互相等待的现象.若无外力作用,它们都将无法推进下去,此时称系统处于死锁状态或系统产生了 ...
- 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 ...
- .Net Core入门与.Net需要注意的地方
1.编码注册 Encoding.RegisterProvider(CodePagesEncodingProvider.Instance); 否则抛出异常 'GB2312' is not a suppo ...
- tjuthesis 图标题左对齐修改办法
图标题格式默认是居中的. 将 format 文件里定义图表标题样式部分的 \centering 删去,可变为左对齐. 如下: %% 定制浮动图形和表格标题样式\makeatletter\long\de ...
- 爱好-超级IP:超级IP
ylbtech-爱好-超级IP:超级IP IP,是Intellectual Property的缩写,字面粗译为“知识产权”,特指具有长期生命力和商业价值的跨媒介内容运营.一个具有可开发价值的真正的I ...
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_04 IO字节流_11_字节输入流一次读取多个字节
参数带字节数组的 把字节数组转换为字符串 文件里面有ABCDE 再来读取一次 再来读取一次.读取的结果是ED 再来读取,-1到时输出了.但是还是把ED读取出来了. 原理 第一步创建流对象 第二部创建数 ...