手機注冊發(fā)送驗證碼倒計時的簡單實例
更新時間:2017年11月15日 08:31:47 作者:creatP
下面小編就為大家分享一篇手機注冊發(fā)送驗證碼倒計時的簡單實例。具有很好的參考價值,一起跟隨小編過來看看吧,希望對大家有所幫助
如下所示:
()這里用的是input做的點擊發(fā)送驗證碼
<input type="number" class="input" name="mobile" placeholder="手機號" style="border: none"
<input class="hui_kuang"style="width: 30%;text-align: center;height: 42px"onclick="setTime(this)" value='獲取驗證碼'>
<script>
//頁面初始化獲取倒計時數(shù)字(避免在倒計時時用戶刷新瀏覽器導(dǎo)致倒計時歸零)
var $getCodeInput = $(".hui_kuang");
var sessionCountdown = sessionStorage.getItem("countdown");
if (!sessionCountdown) {
$(".hui_kuang").val("獲取驗證碼")
} else {
$(".hui_kuang").val("重新發(fā)送(" + sessionCountdown + ")");
setCode($getCodeInput, sessionCountdown);
}
//獲取驗證碼
function setTime() {
var remobile = $("#registForm input[name='mobile']").val();
if (!remobile) {
alert("請輸入手機號碼")
return;
}
if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(remobile))) {
alert("請輸入有效的手機號碼")
return;
} else {
setCode($getCodeInput, 60);
}
}
//發(fā)送驗證碼倒計時
function setCode($getCodeInput, countdown) {
if (countdown == 0) {
$getCodeInput.attr('disabled', false);
// $getCodeInput.removeAttribute("disabled");
$getCodeInput.val("獲取驗證碼");
sessionStorage.removeItem("countdown");
return;
} else {
$getCodeInput.attr('disabled', true);
$getCodeInput.val("重新發(fā)送(" + countdown + ")");
countdown--;
}
sessionStorage.setItem("countdown", countdown);
window.setTimeout(function () {
setCode($getCodeInput, countdown);
}, 1000);
}
</script>
以上這篇手機注冊發(fā)送驗證碼倒計時的簡單實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap開關(guān)(switch)控件學(xué)習(xí)筆記分享
這篇文章主要為大家分享了Bootstrap開關(guān)(switch)控件學(xué)習(xí)筆記,介紹了Bootstrap開關(guān)(switch)控件的功能、使用說明,感興趣的小伙伴們可以參考一下2016-05-05
新手學(xué)習(xí)前端之js模仿淘寶主頁網(wǎng)站
淘寶網(wǎng)大家在熟悉不過了,那么淘寶網(wǎng)首頁模板是怎么做的呢?今天小編抽時間給大家分享新手學(xué)習(xí)前端之js模仿淘寶主頁網(wǎng)站的相關(guān)資料,需要的朋友可以參考下
2016-10-10 
