JQuery實(shí)現(xiàn)的按鈕倒計(jì)時(shí)效果
本文實(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)文章
AMD異步模塊定義介紹和Require.js中使用jQuery及jQuery插件的方法
這篇文章主要介紹了AMD異步模塊定義介紹和Require.js中使用jQuery及jQuery插件的方法,需要的朋友可以參考下2014-06-06
jQuery+html5實(shí)現(xiàn)div彈出層并遮罩背景
今天在項(xiàng)目中用到了一個(gè)很好的div彈出層效果,jQuery+html5實(shí)現(xiàn)div彈出層并遮罩背景,效果非常棒,拿出來和大家一起分享!2015-04-04
jQuery 瀑布流 絕對(duì)定位布局(二)(延遲AJAX加載圖片)
瀑布流-絕對(duì)定位布局,與浮動(dòng)布局的區(qū)別在于布局不一樣,AJAX不一樣2012-05-05
jQuery.extend 與 jQuery.fn.extend的用法及區(qū)別實(shí)例分析
這篇文章主要介紹了jQuery.extend 與 jQuery.fn.extend的用法及區(qū)別,結(jié)合實(shí)例形式分析了jQuery.extend與jQuery.fn.extend的功能、使用方法及區(qū)別,需要的朋友可以參考下2018-07-07
jQuery 連續(xù)列表實(shí)現(xiàn)代碼
你有沒有手工的編寫過一些重復(fù)的代碼?你也覺得它們是如此的無聊吧。好了,這里有更好的解決辦法。2009-12-12
jQuery實(shí)現(xiàn)手風(fēng)琴小案例
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)手風(fēng)琴小案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04

