js實現(xiàn)點擊獲取驗證碼倒計時效果
更新時間：2021年01月28日 11:09:24 投稿：lijiao
這篇文章主要為大家詳細介紹了js實現(xiàn)點擊獲取驗證碼倒計時效果，這種效果大家經(jīng)常遇到，示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
網(wǎng)站中為了防止惡意獲取驗證短信、驗證郵箱，都會在點擊獲取驗證碼的按鈕上做個倒計時的效果。實現(xiàn)這個功能，一個setInterval和一個clearInterval就能搞定了，不需要太多的代碼。實例效果和代碼如下：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<input type="button" style="height:32px;width:120px;" value="點擊發(fā)送驗證碼" onclick="sendCode(this)" />
<script type="text/javascript">
var clock = '';
var nums = 10;
var btn;
function sendCode(thisBtn)
{
btn = thisBtn;
btn.disabled = true; //將按鈕置為不可點擊
btn.value = nums+'秒后可重新獲取';
clock = setInterval(doLoop, 1000); //一秒執(zhí)行一次
}
function doLoop()
{
nums--;
if(nums > 0){
btn.value = nums+'秒后可重新獲取';
}else{
clearInterval(clock); //清除js定時器
btn.disabled = false;
btn.value = '點擊發(fā)送驗證碼';
nums = 10; //重置時間
}
}
</script>
更多關(guān)于倒計時的文章請查看專題：《倒計時功能》
利用setInterval和clearIntervaljs實現(xiàn)js點擊獲取驗證碼倒計時效果，希望對大家的學習有所幫助。
相關(guān)文章
Bootstrap提供了四種用于<img>類的樣式，在本文給大家詳細介紹，需要的朋友可以參考下2016-12-12
下面小編就為大家?guī)硪黄肑S生成UUID的方法實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-03-03
使用uni-app框架開發(fā)微信小程序,可以使用高德地圖開發(fā)地圖選點、搜索位置、定位、獲取詳細的地址信息、碼值等信息,下面這篇文章主要給大家介紹了關(guān)于uniapp使用高德地圖的超詳細步驟,需要的朋友可以參考下2022-12-12
下面小編就為大家?guī)硪黄猨s操作瀏覽器的參數(shù)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
kindeditor編輯器點中圖片滾動條往上頂?shù)腷ug
這篇文章主要介紹了kindeditor編輯器點中圖片滾動條往上頂?shù)腷ug的相關(guān)資料,需要的朋友可以參考下2015-07-07
關(guān)于JavaScript中高階函數(shù)的魅力詳解
高階函數(shù)：英文叫Higher-order function。JavaScript的函數(shù)其實都指向某個變量。下面這篇文章主要給大家介紹了關(guān)于JavaScript中高階函數(shù)的魅力，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下2018-09-09
JavaScript偽數(shù)組和數(shù)組的使用與區(qū)別
這篇文章主要給大家介紹了關(guān)于JavaScript偽數(shù)組和數(shù)組使用與區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
這篇文章主要分享一個Javascript打印局部頁面實例,需要的朋友可以參考下。2016-06-06
這篇文章介紹了JS代碼同步文本框內(nèi)容的方法，有需要的朋友可以參考一下2013-07-07
這篇文章主要介紹了JavaScript實現(xiàn)修改偽類樣式的方法以及代碼實現(xiàn)過程，一起學習參考下吧。2017-11-11