js實(shí)現(xiàn)的倒計(jì)時(shí)按鈕實(shí)例

更新時(shí)間：2015年06月24日 17:18:26 作者：第2015換個(gè)昵稱

這篇文章主要介紹了js實(shí)現(xiàn)的倒計(jì)時(shí)按鈕,實(shí)例分析了javascript倒計(jì)時(shí)效果的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)的倒計(jì)時(shí)按鈕。分享給大家供大家參考。具體分析如下：

效果圖如下：

具體代碼如下：

<span style="font-size: 14px;">
<input type="button" value="確定"id="rulesubmit" /> 
<scripttypescripttype="text/javascript"> 
var secs = 3; 
var wait = secs * 1000; 
var update = function(num,value){ 
if (num == (wait/1000)){ 
 $("#rulesubmit").val("免費(fèi)獲取"); 
} 
else{ 
printnr = (wait/1000) - num; 
$("#rulesubmit").val("免費(fèi)獲取(" + printnr +")"); 
} 
}; 
var timer = function(){ 
$("#rulesubmit").attr("disabled",false); 
$("#rulesubmit").val("免費(fèi)獲取"); 
}; 
$(function(){ 
(function(){ 
function getValidateCode(){ 
$("#rulesubmit").val("免費(fèi)獲取(" + secs +")"); 
$("#rulesubmit").attr("disabled",true); 
for (i = 1; i <= secs;i++){ 
window.setTimeout("update(" + i + ")",i*1000); 
} 
window.setTimeout("timer()",wait); 
} 
$("#rulesubmit").click(function(){ 
getValidateCode(); 
}); 
})();
//注意，我這里在測試的時(shí)候改成里匿名函數(shù)，其實(shí)不必這樣做也可以實(shí)現(xiàn) 
//getValidateCode()當(dāng)作一個(gè)單獨(dú)的函數(shù)，在$(function(){//點(diǎn)擊按鈕執(zhí)行函數(shù)，即上面藍(lán)色部分代碼;}); 
}); 
</script></span>

這里只是一個(gè)小例子，在實(shí)際運(yùn)用中，可能需要記錄各種時(shí)間，考慮到頁面刷新的變化，需要用cookie來進(jìn)行數(shù)據(jù)存儲等等！

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

詳解前端安全之JavaScript防http劫持與XSS
作為前端，一直以來都知道HTTP劫持與XSS跨站腳本、CSRF跨站請求偽造。防御這些劫持最好的方法是從后端入手，前端能做的太少。而且由于源碼的暴露，攻擊者很容易繞過防御手段。但這不代表我們?nèi)チ私膺@塊的相關(guān)知識是沒意義的，本文的許多方法，用在其他方面也是大有作用。
2021-05-05
原生JS實(shí)現(xiàn)呼吸輪播圖
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)呼吸輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
JavaScript實(shí)現(xiàn)Tab欄切換特效
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)Tab欄切換特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
JavaScript this在函數(shù)中的指向及實(shí)例詳解
這篇文章主要介紹了JavaScript this在函數(shù)中的指向及實(shí)例詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10
利用JavaScript實(shí)現(xiàn)的10種排序算法總結(jié)
這篇文章主要介紹了利用JavaScript實(shí)現(xiàn)的十種排序算法，主要介紹了冒泡，選擇，插入，希爾，歸并，快速，堆排，計(jì)數(shù)，桶排和基數(shù)，有感興趣的小伙伴可以參考閱讀本文
2023-05-05
js實(shí)現(xiàn)addClass,removeClass,hasClass的函數(shù)代碼
js實(shí)現(xiàn)addClass,removeClass,hasClass的函數(shù)代碼，需要的朋友可以參考下。
2011-07-07
使用js去除字符串內(nèi)所帶有空格的三種方法
在前端開發(fā)的過程中,我們經(jīng)常會遇到需要對于輸入的字符串進(jìn)行格式化處理,這篇文章主要給大家介紹了關(guān)于使用js去除字符串內(nèi)所帶有空格的三種方法,需要的朋友可以參考下
2023-10-10
12306驗(yàn)證碼破解思路分享
本文給大家分享的是個(gè)人對于12306的新的驗(yàn)證碼系統(tǒng)的破解思路，僅僅是思路，還沒進(jìn)行實(shí)地驗(yàn)證，推薦給大家，拋磚引玉吧。
2015-03-03
JavaScript中的this關(guān)鍵詞指向
本文介紹了JavaScript中的this關(guān)鍵詞指向，this是JavaScript的一個(gè)關(guān)鍵字，他是函數(shù)執(zhí)行過程中，自動生成的一個(gè)內(nèi)部對象，指當(dāng)前的對象，只在當(dāng)前函數(shù)內(nèi)部使用，更多相關(guān)資料需要的小伙伴可以參考下面文章內(nèi)容
2022-05-05
微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05