JS實現(xiàn)用戶注冊時獲取短信驗證碼和倒計時功能的示例代碼分享

<p class="user-form">
<form action="{{ path('zm_member_register') }}" method="post">
<p class="form-list">
<label class="register-label">手機號碼</label>
<input class="regphone input-register" type="text" name="phone" placeholder="請輸入手機號碼" />
</p>
<p class="form-list">
<label class="register-label">驗證碼</label>
<input class="input-short" type="text" name="sms_salt" placeholder="請輸短信驗證碼" />
<input class="input-code" id="btn" type="button" value="發(fā)送驗證碼" />
</p>
<input style="margin-top: 60px;" type="submit" class="registerSubmit form-sumbit" value="提交" />
</form>
</p>

<script type="text/javascript">
//倒計時60秒
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="獲取動態(tài)碼";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value="重新發(fā)送(" + wait + ")";
wait--;
setTimeout(function() {
time(o)
}, 1000)
}
}
$('.input-code').click(function() {
var phone = $('.regphone').val();
$.ajax({
type: 'post',
url: "{{ path('zm_member_get_salt') }}",
data: {
phone: phone,
type: 1
},
dataType: 'json',
success: function (result) {
if (result.flag == 1) {
// alert('成功');
time(btn);
} else {
alert(result.content);
}
}
});
});
</script>