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

需要实现以下逻辑

按钮不可选

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

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

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

核心代码:

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);
};
}]);

最新文章

  1. 前端面试题2016--HTML
  2. Mac下Call to undefined function imagettftext() 解决方案
  3. easyui的window插件再次封装
  4. 数字信号处理实验(四)&mdash;&mdash;数字滤波器结构
  5. 【转】赞一下huicpc035
  6. javascript 定时器
  7. SQL Server用户自定义函数
  8. fltk_hello world
  9. 2015美团网 哈工大 第k个排列
  10. ClassNotFoundException
  11. java 内存 垃圾回收调优
  12. Heavy Transportation
  13. iOS获取运营商信号强度
  14. Python 妙用heapq
  15. Window10系统中MongoDB数据库导入数据文件
  16. 【Codeforces Round】 #432 (Div. 2) 题解
  17. SQL知识点、SQL语句学习
  18. class^=是什么意思啊,在css中 5
  19. .Net Core命令行配置-配置介绍
  20. pycharm中安装可以贴图片的Markdown插件

热门文章

  1. hadoop2.7伪分布式搭建
  2. SpringBoot自定义FailureAnalyzer
  3. Cmdow-一个win32窗口管理命令行工具
  4. 2017ICPC南宁补题
  5. es之词库热更新解决方案
  6. [BZOJ2822]:[AHOI2012]树屋阶梯(卡特兰数)
  7. 如何删除eclipse的subclipse插件记住的SVN用户名和密码
  8. python条件判断之直接加数字
  9. O(1)得到螺旋矩阵的值
  10. PHP代码修改后提交,无法立即生效