JQuery實現(xiàn)的按鈕倒計時效果
更新時間：2015年12月23日 15:04:30 作者：daimajiayuan
這篇文章主要介紹了JQuery實現(xiàn)的按鈕倒計時效果,涉及jQuery結(jié)合時間函數(shù)動態(tài)修改按鈕屬性的相關(guān)技巧,需要的朋友可以參考下
本文實例講述了JQuery實現(xiàn)的按鈕倒計時效果。分享給大家供大家參考，具體如下：
一個實現(xiàn)了在按鈕上顯示倒計時，倒計時完畢自動將按鈕設(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)行效果截圖如下：
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
今天在實現(xiàn)一段廣告的時候，需要判斷指定元素的內(nèi)容是否為空，為空則插入廣告，否則就不執(zhí)行，這里就為大家簡單介紹一下需要的朋友可以參考一下2018-05-05
很多新手朋友們都不知道jquery 中的each()怎么跳出循環(huán)，在each的回調(diào)函數(shù)中使用return false2014-05-05
這篇文章主要介紹了使用JQuery自動完成插件Auto Complete詳解,使用JQuery自動完成插件，更新現(xiàn)有圖書列表頁面上的搜索，當(dāng)用戶鍵入的時候立即顯示結(jié)果。,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細(xì)介紹了jQuery zTree樹插件的使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要為大家分享了Jquery日歷插件e-calendar升級版,e-calendar是一個jQuery插件,創(chuàng)建一個事件日歷它很容易使用,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了一個簡單的Tab切換組件實例，大家可以參考使用2013-11-11
jQuery彈出層插件popShow(改進(jìn)版)用法示例
這篇文章主要介紹了jQuery彈出層插件popShow(改進(jìn)版)用法,對比前文分析了popShow插件的使用方法,需要的朋友可以參考下2017-01-01
jquery用get實現(xiàn)ajax在ie里面刷新不進(jìn)入后臺解決方法
jquery用get實現(xiàn)ajax在ie里面刷新不進(jìn)入后臺的情況想必大家都有遇到過吧，下面與大家分享下具體的解決方法，希望對大家解決問題有所幫助2013-08-08
jquery復(fù)選框全選/取消示例,實現(xiàn)點(diǎn)擊復(fù)選框的時候全選所有的子復(fù)選框，再點(diǎn)擊取消所有復(fù)選框的選中狀態(tài)2013-12-12
jquery 新手入門參考教程。2010-04-04