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>
運行效果截圖如下:
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
AMD異步模塊定義介紹和Require.js中使用jQuery及jQuery插件的方法
這篇文章主要介紹了AMD異步模塊定義介紹和Require.js中使用jQuery及jQuery插件的方法,需要的朋友可以參考下2014-06-06jQuery+html5實現(xiàn)div彈出層并遮罩背景
今天在項目中用到了一個很好的div彈出層效果,jQuery+html5實現(xiàn)div彈出層并遮罩背景,效果非常棒,拿出來和大家一起分享!2015-04-04jQuery 瀑布流 絕對定位布局(二)(延遲AJAX加載圖片)
瀑布流-絕對定位布局,與浮動布局的區(qū)別在于布局不一樣,AJAX不一樣2012-05-05jQuery.extend 與 jQuery.fn.extend的用法及區(qū)別實例分析
這篇文章主要介紹了jQuery.extend 與 jQuery.fn.extend的用法及區(qū)別,結(jié)合實例形式分析了jQuery.extend與jQuery.fn.extend的功能、使用方法及區(qū)別,需要的朋友可以參考下2018-07-07