JQuery實(shí)現(xiàn)的按鈕倒計(jì)時(shí)效果
更新時(shí)間：2015年12月23日 15:04:30 作者：daimajiayuan
這篇文章主要介紹了JQuery實(shí)現(xiàn)的按鈕倒計(jì)時(shí)效果,涉及jQuery結(jié)合時(shí)間函數(shù)動(dòng)態(tài)修改按鈕屬性的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了JQuery實(shí)現(xiàn)的按鈕倒計(jì)時(shí)效果。分享給大家供大家參考，具體如下：
一個(gè)實(shí)現(xiàn)了在按鈕上顯示倒計(jì)時(shí)，倒計(jì)時(shí)完畢自動(dòng)將按鈕設(shè)置為不可用的效果，具體代碼如下：
<html>
<head>
<title>test count down button</title>
<script src="jquery1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
var count = 10;
var countdown = setInterval(CountDown, 1000);
function CountDown() {
$("#btn").attr("disabled", true);
$("#btn").val("Please wait " + count + " seconds!");
if (count == 0) {
$("#btn").val("Submit").removeAttr("disabled");
clearInterval(countdown);
}
count--;
}
})
});
</script>
</head>
<body>
<input type="button" id="btn" value="Submit" />
</body>
</html>
運(yùn)行效果截圖如下：
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
今天在實(shí)現(xiàn)一段廣告的時(shí)候，需要判斷指定元素的內(nèi)容是否為空，為空則插入廣告，否則就不執(zhí)行，這里就為大家簡單介紹一下需要的朋友可以參考一下2018-05-05
很多新手朋友們都不知道jquery 中的each()怎么跳出循環(huán)，在each的回調(diào)函數(shù)中使用return false2014-05-05
使用JQuery自動(dòng)完成插件Auto Complete詳解
這篇文章主要介紹了使用JQuery自動(dòng)完成插件Auto Complete詳解,使用JQuery自動(dòng)完成插件，更新現(xiàn)有圖書列表頁面上的搜索，當(dāng)用戶鍵入的時(shí)候立即顯示結(jié)果。,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細(xì)介紹了jQuery zTree樹插件的使用教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要為大家分享了Jquery日歷插件e-calendar升級(jí)版,e-calendar是一個(gè)jQuery插件,創(chuàng)建一個(gè)事件日歷它很容易使用,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Tab切換組件（選項(xiàng)卡功能）實(shí)例代碼
這篇文章主要介紹了一個(gè)簡單的Tab切換組件實(shí)例，大家可以參考使用2013-11-11
jQuery彈出層插件popShow(改進(jìn)版)用法示例
這篇文章主要介紹了jQuery彈出層插件popShow(改進(jìn)版)用法,對(duì)比前文分析了popShow插件的使用方法,需要的朋友可以參考下2017-01-01
jquery用get實(shí)現(xiàn)ajax在ie里面刷新不進(jìn)入后臺(tái)解決方法
jquery用get實(shí)現(xiàn)ajax在ie里面刷新不進(jìn)入后臺(tái)的情況想必大家都有遇到過吧，下面與大家分享下具體的解決方法，希望對(duì)大家解決問題有所幫助2013-08-08
jquery復(fù)選框全選/取消示例,實(shí)現(xiàn)點(diǎn)擊復(fù)選框的時(shí)候全選所有的子復(fù)選框，再點(diǎn)擊取消所有復(fù)選框的選中狀態(tài)2013-12-12
jquery 新手入門參考教程。2010-04-04