JQuery實(shí)現(xiàn)倒計(jì)時(shí)按鈕的實(shí)現(xiàn)代碼

更新時(shí)間：2012年03月23日 22:53:23 作者：

頁(yè)面中需要實(shí)現(xiàn)某個(gè)按鈕點(diǎn)擊完后，禁用它，并顯示倒計(jì)時(shí)。這個(gè)默認(rèn)是3秒，代碼很簡(jiǎn)單

 
<head> 
<title>test count down button</title> 
<script src="http://demo.jb51.net/jslib/jquery/jquery-1.5.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$('#btn').click(function () { 
var count = 3; 
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> 

有興趣您可以自己實(shí)現(xiàn)一下。

您可能感興趣的文章:

倒計(jì)時(shí)

相關(guān)文章

jquery 層次選擇器siblings與nextAll的區(qū)別介紹
jquery 層次選擇器包括siblings與nextAll，本文為大家介紹下具體的使用方法，想學(xué)習(xí)的朋也可以參考下，希望對(duì)大家有所幫助
2013-08-08
jQuery編寫(xiě)widget的一些技巧分享
在編寫(xiě)widget的時(shí)候，一般我們需要綁定一些事件，最好將這些widget的綁定事件加上當(dāng)前widget的命名空間。
2010-10-10
webuploader模態(tài)框ueditor顯示問(wèn)題解決方法
這篇文章主要為大家詳細(xì)介紹了webuploader模態(tài)框ueditor顯示問(wèn)題的解決，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
通過(guò)jquery.cookie.js實(shí)現(xiàn)記住用戶名、密碼登錄功能
這篇文章主要介紹了通過(guò)jquery.cookie.js實(shí)現(xiàn)記住用戶名、密碼登錄功能,通過(guò)Cookies讓網(wǎng)站服務(wù)器把少量數(shù)據(jù)儲(chǔ)存到客戶端的硬盤(pán)或內(nèi)存，從客戶端的硬盤(pán)讀取數(shù)據(jù)的一種技術(shù)；具體實(shí)現(xiàn)過(guò)程大家通過(guò)本文一起看看吧
2018-06-06
jquery()函數(shù)的三種語(yǔ)法介紹
jquery()函數(shù)有三種不同的語(yǔ)法，在本文將為大家詳細(xì)介紹下，感興趣的朋友不要錯(cuò)過(guò)
2013-10-10
jquery里的each使用方法詳解
有個(gè)同事問(wèn)我each使用方法,我把我知道的用法告訴他.他卻說(shuō)不是這樣的.如是在網(wǎng)上小逛了一下,果然用法有很多.下面總結(jié)下大慨的使用方法.
2010-12-12
淺談jQuery添加的HTML,JS失效的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談jQuery添加的HTML,JS失效的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
基于jquery編寫(xiě)的橫向自適應(yīng)幻燈片切換特效的實(shí)例代碼
全屏自適應(yīng)jquery焦點(diǎn)圖切換特效,在IE6這個(gè)瀏覽器兼容性問(wèn)題上得到了和諧,兼容IE6,適用瀏覽器：IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.相關(guān)代碼
2013-08-08
js和jQuery設(shè)置Opacity半透明兼容IE6
對(duì)于每一個(gè)網(wǎng)站前端開(kāi)發(fā)人員，常常都會(huì)遇到設(shè)置div透明度的需求，比如在實(shí)現(xiàn)圖片幻燈片切換效果經(jīng)常就需要使圖片淡入淡出。本文分別對(duì)原生js和jQuery在IE和其它瀏覽器中設(shè)置透明度的方法和相關(guān)注意事項(xiàng)進(jìn)行總結(jié)。
2016-05-05
jQuery Position方法使用和兼容性
position方法獲取匹配元素相對(duì)父元素的偏移。接下來(lái)通過(guò)本文給大家分享jQuery Position方法使用和兼容性的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2017-08-08