jQuery 是一款優秀的 JavaScript 庫,在網頁開發中廣受歡迎。其中,倒計時功能可為網頁增色不少,如果結合按鈕實現,效果更佳。接下來,將介紹 jQuery 如何設置按鈕倒計時。
// HTML 代碼 <button id="btn">獲取驗證碼</button> // jQuery 代碼 var time = 60; // 定義倒計時的時間 $("#btn").click(function() { var interval = setInterval(function() { if (time > 0) { time--; $("#btn").text("倒計時 " + time + " 秒"); $("#btn").prop("disabled", true); } else { clearInterval(interval); $("#btn").text("獲取驗證碼"); $("#btn").prop("disabled", false); time = 60; } }, 1000); });
首先,在 HTML 中添加一個按鈕,以及在 jQuery 中定義變量time
作為倒計時時長。然后,在按鈕上添加點擊事件,定義一個定時器,每隔 1 秒鐘執行一次,直到倒計時結束。
在定時器的回調函數中,先判斷倒計時是否結束,如果沒有結束,將變量time
減 1 并更新按鈕的文本和禁用狀態。如果倒計時結束,清除定時器,并重置按鈕的文本和禁用狀態,并將變量time
重置為 60。
通過以上的代碼,就可以實現一個簡單的按鈕倒計時功能。當然,也可以根據自己的需求進行定制。希望這篇文章能幫助大家更好地使用 jQuery 實現網頁功能。