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 ...
随机推荐
- 关于softmax稳定性问题
因为softmax中指数函数,很容易超出计算机表达的最大值,所以采用分子分母同时乘N的方法,N一般为最大值.
- CF D. Labyrinth 01BFS
由于上下走不限制,所以按照贪心,我们应该尽可能走上下方向. 我们可以开一个双端队列,并认为每次提取队首的时候得到的是到达该点的最优策略.(这个一定是唯一的,因为不可能向右走几格,然后再退回去. ) 那 ...
- (3.3)狄泰软件学院C++课程学习剖析四
对课程前面40课的详细回顾分析(二) 1.一个类的成员变量是对于每个对象专有的,但是成员函数是共享的. 2.构造函数只是决定一个对象的初始化状态,而不能决定对象的诞生.二阶构造人为的将初始化过程分为了 ...
- java中 使用输入+输出流对对象序列化
对象: 注意记得实现 Serializable package com.nf147.sim.entity; import java.io.Serializable; public class News ...
- 《SQL Server 2012 T-SQL基础》读书笔记 - 9.事务和并发
Chapter 9 Transactions and Concurrency SQL Server默认会把每个单独的语句作为一个事务,也就是会自动在每个语句最后提交事务(可以设置IMPLICIT_TR ...
- element-ui的rules全局验证
原文:https://www.jianshu.com/p/6a29e9e51b61 rules.js var QQV = (rule, value, callback) => { debugge ...
- sshd使用
sshd服务 1.sshd介绍 sshd为secure shell的简称:可以通过网络在主机中开机shell的服务 连接方式(在客户端):ssh username@ip #文本模式 ...
- 图书-软件架构:《Design Patterns: Elements of Reusable Object-Oriented Software》(即后述《设计模式》一书)
ylbtech-图书-软件架构:<Design Patterns: Elements of Reusable Object-Oriented Software>(即后述<设计模式&g ...
- python-笔记(一)python简介和入门
一.什么是python? python是一种面向对象.解释型的计算机语言,它的特点是语法简洁.优雅.简单易学.在1989诞生,Guido(龟叔)开发.这里的python并不是蟒蛇的意思,而是龟叔非常喜 ...
- java对接短信平台
短信验证码目前是比较主流验证身份的一种方式,下面分享下我对接的几种短信平台 阿里云短信:https://api.alidayu.com/docs/api.htm?spm=a3142.7395905.4 ...