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