1.使用详解
setInterval()与clearInterval()是直属于windows对象的js函数。
setInterval()以间隔指定的毫秒数不停的执行指定的代码。使用方法:setInterval(code,millisec),两个参数都是必须的,第一 个参数为要调用的函数或要执行的代码串。第二个参数为周期性执行或调用 code 之间的时间间隔,以毫秒计。
clearInterval()用于停止 setInterval() 方法执行的函数代码。clearInterval(id_of_setinterval),参数是必须的,为setInterval返回的ID值
2.获取验证码倒计时源码
获取验证码前端采用ACE框架,输入手机号,获取验证码,输入手机获取的验证码后登录。
源码如下:
<html lang="en">
<head>
<link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="assets/css/font-awesome.min.css"/>
<link rel="stylesheet" href="assets/css/ace.min.css"/>
<link rel="stylesheet" href="assets/css/ace-rtl.min.css"/>
</head>
<body class="login-layout">
<div class="main-container">
<div class="main-content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="login-container">
<div class="space-6"></div>
<div id="signup-box" class="signup-box widget-box no-border">
<div class="widget-body">
<div class="widget-main">
<h4 class="header green lighter bigger">
<i class="icon-group blue"></i>
登录
</h4>
<div class="space-6"></div>
<p> 请输入登录信息: </p>
<form>
<fieldset>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input type="text" class="form-control" placeholder="手机号" id="phone"/>
<i class="icon-phone"></i>
</span>
</label>
<div class="space-10"></div>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input type="text" class="form-control" placeholder="验证码" id="verifyCode"/>
<i class="icon-comment"></i>
</span>
</label>
<div class="space-10"></div>
<div class="clearfix">
<button type="button" class="width-100 pull-left btn btn-sm btn-success" id="obtainVerifyCode">
获取验证码
</button>
</div>
<div class="space-10"></div>
<div class="clearfix">
<button type="button" class="width-100 pull-right btn btn-sm btn-primary" id="login" disabled="disabled">
登录
<i class="icon-arrow-right icon-on-right"></i>
</button>
</div>
</fieldset>
</form>
</div>
</div><!-- /widget-body -->
</div><!-- /signup-box -->
</div><!-- /position-relative -->
</div>
</div><!-- /.col -->
</div><!-- /.row -->
</div>
</div><!-- /.main-container -->
<script>
jQuery(function () {
$("#obtainVerifyCode").bind("click", function () {
var limitTime = 60;
var phone = $("#phone").val();
if (!phone) {
layer.alert("请输入手机号");
return;
}
var setIntervalId = null;
// 每隔1000ms执行一次定时器
setIntervalId = setInterval(function () {
if (limitTime == 0) {
//60s倒计时结束后清除计时器
clearInterval(setIntervalId);
$("#obtainVerifyCode").html("获取验证码");
} else {
limitTime--;
$("#obtainVerifyCode").html(limitTime + "秒后可以重新获取验证码");
}
}, 1000);
//获取验证码ajax
//获取到验证码后登录按钮可以点击
$('#login').removeAttr("disabled");
})
$("#login").bind("click", function () {
var phone = $("#phone").val();
if (!phone) {
layer.alert("请输入手机号");
return;
}
var verifyCode = $("#verifyCode").val();
if (!verifyCode) {
layer.alert("请输入验证码");
return;
}
//登录ajax
})
})
</script>
</body>
</html>
3.获取验证码倒计时页面效果