- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) > web開(kāi)發(fā) > JavaScript >
- jQuery實(shí)現發(fā)送驗證碼控制按鈕禁用功能
需求效果：點(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 () {
// 定義一個(gè)變量存儲時(shí)間的數字
var n = 5;
// 讓按鈕被禁用
// 替換按鈕的文字內容
$(this).prop("disabled",true).val(n + "s 后重新發(fā)送")
// 每隔 1s 更改倒計時(shí)內容
// 通過(guò)定時(shí)器進(jìn)行每隔 1s 減時(shí)間效果
var timer = setInterval(() => {
n--;
// 文字內容發(fā)生變化
// 定時(shí)器內部的this指向的默認為 window
$(this).val(n + "s 后重新發(fā)送")
// 判斷如果時(shí)間到了 0 ，就要停止定時(shí)器
if (n <= 0) {
clearInterval(timer)
// 5s 結束后，需要讓文字恢復 發(fā)送
// 讓按鈕取消禁用
$(this).val("重新發(fā)送").prop("disabled",false)
}
},1000)
})
</script>
</body>
</html>
到此這篇關(guān)于jQuery實(shí)現發(fā)送驗證碼控制按鈕禁用功能的文章就介紹到這了,更多相關(guān)jquery控制按鈕禁用內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自本網(wǎng)站內容采集于網(wǎng)絡(luò )互聯(lián)網(wǎng)轉載等其它媒體和分享為主，內容觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如侵犯了原作者的版權，請告知一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容，聯(lián)系我們QQ:712375056，同時(shí)歡迎投稿傳遞力量。
Copyright ? 2009-2022 56dr.com. All Rights Reserved. 特網(wǎng)科技 特網(wǎng)云 版權所有 特網(wǎng)科技 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 百度云 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2
建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
