Angular.js 使用获取验证码按钮实现-倒计时
2024-09-26 02:09:33
获取验证码界面效果如图:
需要实现以下逻辑
按钮不可选
--输入电话号码,按钮可选
--点击获取,进入倒计时,按钮不可选
--倒计时结束,回到初识状态
核心代码:
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);
};
}]);
最新文章
- 前端面试题2016--HTML
- Mac下Call to undefined function imagettftext() 解决方案
- easyui的window插件再次封装
- 数字信号处理实验(四)&mdash;&mdash;数字滤波器结构
- 【转】赞一下huicpc035
- javascript 定时器
- SQL Server用户自定义函数
- fltk_hello world
- 2015美团网 哈工大 第k个排列
- ClassNotFoundException
- java 内存 垃圾回收调优
- Heavy Transportation
- iOS获取运营商信号强度
- Python 妙用heapq
- Window10系统中MongoDB数据库导入数据文件
- 【Codeforces Round】 #432 (Div. 2) 题解
- SQL知识点、SQL语句学习
- class^=是什么意思啊,在css中 5
- .Net Core命令行配置-配置介绍
- pycharm中安装可以贴图片的Markdown插件