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