jQuery實現(xiàn)發(fā)送驗證碼控制按鈕禁用功能
更新時間：2021年07月24日 10:53:35 作者：野草閑花逢春生
最近接到新需求，需要實現(xiàn)一個點(diǎn)擊發(fā)送驗證碼之后，按鈕禁用，在5秒之后取消禁用，看似需求很簡單，實現(xiàn)起來還真的好好動動腦筋，下面小編把jquery控制按鈕禁用核心代碼分享給大家，需要的朋友參考下吧
需求效果：點(diǎn)擊發(fā)送驗證碼之后，按鈕禁用，5秒之后取消禁用。
效果圖如下：
點(diǎn)擊發(fā)送之后禁用按鈕
5秒之后取消禁用，重新發(fā)送
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text">
<input type="button" value="發(fā)送">
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 獲取元素
var $btn = $("input:button")
// 添加按鈕的點(diǎn)擊事件
$btn.click(function () {
// 定義一個變量存儲時間的數(shù)字
var n = 5;
// 讓按鈕被禁用
// 替換按鈕的文字內(nèi)容
$(this).prop("disabled",true).val(n + "s 后重新發(fā)送")
// 每隔 1s 更改倒計時內(nèi)容
// 通過定時器進(jìn)行每隔 1s 減時間效果
var timer = setInterval(() => {
n--;
// 文字內(nèi)容發(fā)生變化
// 定時器內(nèi)部的this指向的默認(rèn)為 window
$(this).val(n + "s 后重新發(fā)送")
// 判斷如果時間到了 0 ，就要停止定時器
if (n <= 0) {
clearInterval(timer)
// 5s 結(jié)束后，需要讓文字恢復(fù) 發(fā)送
// 讓按鈕取消禁用
$(this).val("重新發(fā)送").prop("disabled",false)
}
},1000)
})
</script>
</body>
</html>
到此這篇關(guān)于jQuery實現(xiàn)發(fā)送驗證碼控制按鈕禁用功能的文章就介紹到這了,更多相關(guān)jquery控制按鈕禁用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了基于jQuery實現(xiàn)的美觀星級評論打分組件代碼,涉及jQuery回調(diào)函數(shù)及頁面元素屬性動態(tài)操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
jQuery插件FusionCharts實現(xiàn)的Marimekko圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實現(xiàn)的Marimekko圖效果,結(jié)合實例形式分析了jQuery使用FusionCharts插件結(jié)合xml數(shù)據(jù)繪制Marimekko圖的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jQuery打字效果實現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了jQuery打字效果實現(xiàn)方法,詳細(xì)分析了jQuery實現(xiàn)打字效果所涉及的jticker_split.js插件機(jī)具體調(diào)用技巧,并附帶完整的demo源碼供讀者下載參考,需要的朋友可以參考下2015-12-12
jQuery實現(xiàn)別踩白塊兒網(wǎng)頁版小游戲
本文主要介紹了jQuery實現(xiàn)別踩白塊兒網(wǎng)頁版小游戲的思路分析與代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
項目遇到一個消息的模塊,在導(dǎo)航條最上面.想實現(xiàn),當(dāng)收到消息的時候能夠及時的刷新,顯示收到消息的條數(shù)，下面為大家介紹兩種不錯的方法，感興趣的朋友可以參考下2014-01-01
jQuery實現(xiàn)小球點(diǎn)擊發(fā)射動畫
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)小球點(diǎn)擊發(fā)射動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
今天在使用一個jQuery的插件時，發(fā)現(xiàn)在IE下總報錯，但在Firefox下就很正常，所報的錯誤就是：缺少標(biāo)識符！2014-07-07
jQuery實現(xiàn)table中的tr上下移動并保持序號不變的實例代碼
下面小編就為大家?guī)硪黄猨Query實現(xiàn)table中的tr上下移動并保持序號不變的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這兩天突發(fā)奇想，結(jié)果就做了一個jQ的tip插件，形狀就像下面這樣。會隨title的多少改變大小的喲.2010-11-11
眾所周知，Jquery是對JavaScript的一種高效的封裝，所以Jquery要操作的數(shù)組即是JavaScript中的數(shù)組，在 JavaScript中我們使用for以及for-in進(jìn)行數(shù)組的操作2011-08-08