手機(jī)注冊(cè)發(fā)送驗(yàn)證碼倒計(jì)時(shí)的簡(jiǎn)單實(shí)例
如下所示:
()這里用的是input做的點(diǎn)擊發(fā)送驗(yàn)證碼 <input type="number" class="input" name="mobile" placeholder="手機(jī)號(hào)" style="border: none" <input class="hui_kuang"style="width: 30%;text-align: center;height: 42px"onclick="setTime(this)" value='獲取驗(yàn)證碼'> <script> //頁(yè)面初始化獲取倒計(jì)時(shí)數(shù)字(避免在倒計(jì)時(shí)時(shí)用戶(hù)刷新瀏覽器導(dǎo)致倒計(jì)時(shí)歸零) var $getCodeInput = $(".hui_kuang"); var sessionCountdown = sessionStorage.getItem("countdown"); if (!sessionCountdown) { $(".hui_kuang").val("獲取驗(yàn)證碼") } else { $(".hui_kuang").val("重新發(fā)送(" + sessionCountdown + ")"); setCode($getCodeInput, sessionCountdown); } //獲取驗(yàn)證碼 function setTime() { var remobile = $("#registForm input[name='mobile']").val(); if (!remobile) { alert("請(qǐng)輸入手機(jī)號(hào)碼") return; } if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(remobile))) { alert("請(qǐng)輸入有效的手機(jī)號(hào)碼") return; } else { setCode($getCodeInput, 60); } } //發(fā)送驗(yàn)證碼倒計(jì)時(shí) function setCode($getCodeInput, countdown) { if (countdown == 0) { $getCodeInput.attr('disabled', false); // $getCodeInput.removeAttribute("disabled"); $getCodeInput.val("獲取驗(yàn)證碼"); 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>
以上這篇手機(jī)注冊(cè)發(fā)送驗(yàn)證碼倒計(jì)時(shí)的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JS數(shù)據(jù)結(jié)構(gòu)之隊(duì)列結(jié)構(gòu)詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法中的隊(duì)列結(jié)構(gòu),文中通過(guò)簡(jiǎn)單的示例介紹了隊(duì)列結(jié)構(gòu)的原理與實(shí)現(xiàn),需要的可以參考一下2022-11-11微信小程序開(kāi)發(fā)之選項(xiàng)卡(窗口底部TabBar)頁(yè)面切換
本文主要介紹了微信小程序開(kāi)發(fā)之選項(xiàng)卡(窗口底部TabBar)頁(yè)面切換的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04關(guān)于Blog頂部的滾動(dòng)導(dǎo)航條代碼
關(guān)于Blog頂部的滾動(dòng)導(dǎo)航條代碼...2006-09-09原生js實(shí)現(xiàn)表單的正則驗(yàn)證(驗(yàn)證通過(guò)后才可提交)
這篇文章主要給大家介紹了關(guān)于如何利用原生js實(shí)現(xiàn)表單的正則驗(yàn)證,所有驗(yàn)證都通過(guò)后提交按鈕才可用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05詳解webpack import()動(dòng)態(tài)加載模塊踩坑
這篇文章主要介紹了詳解webpack import()動(dòng)態(tài)加載模塊踩坑,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07bootstrap3-dialog-master模態(tài)框使用詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap3-dialog-master模態(tài)框的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08