js實(shí)現(xiàn)的倒計(jì)時(shí)按鈕實(shí)例
本文實(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();
});
})();
//注意,我這里在測(cè)試的時(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ù)存儲(chǔ)等等!
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- js代碼實(shí)現(xiàn)點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)
- js實(shí)現(xiàn)點(diǎn)擊注冊(cè)按鈕開始讀秒倒計(jì)時(shí)的小例子
- 點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)的簡(jiǎn)單js代碼(推薦)
- JS自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用(兩種場(chǎng)景)
- JS實(shí)現(xiàn)發(fā)送短信驗(yàn)證后按鈕倒計(jì)時(shí)功能(防止刷新倒計(jì)時(shí)失效)
- 基于JavaScript實(shí)現(xiàn)手機(jī)短信按鈕倒計(jì)時(shí)(超簡(jiǎn)單)
- ionic+AngularJs實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕
- Angular.js實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)60秒按鈕的簡(jiǎn)單方法
- javascript顯示倒計(jì)時(shí)控制按鈕的簡(jiǎn)單實(shí)現(xiàn)
- JS實(shí)現(xiàn)的倒計(jì)時(shí)恢復(fù)按鈕點(diǎn)擊功能【可用于協(xié)議閱讀倒計(jì)時(shí)】
相關(guān)文章
JavaScript實(shí)現(xiàn)頁面實(shí)時(shí)顯示當(dāng)前時(shí)間的簡(jiǎn)單實(shí)例
這篇文章介紹了頁面實(shí)時(shí)顯示當(dāng)前時(shí)間的簡(jiǎn)單實(shí)例,有需要的朋友可以參考需要2013-07-07
javascript實(shí)現(xiàn)數(shù)字驗(yàn)證碼的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)javascript實(shí)現(xiàn)數(shù)字驗(yàn)證碼的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02
200行HTML+JavaScript實(shí)現(xiàn)年會(huì)抽獎(jiǎng)程序
這篇文章主要為大家詳細(xì)介紹了HTML+JavaScript實(shí)現(xiàn)年會(huì)抽獎(jiǎng)程序的200行代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01
JavaScript Title、alt提示(Tips)實(shí)現(xiàn)源碼解讀
我們知道給某些HTML標(biāo)簽加上title屬性后,這個(gè)標(biāo)簽對(duì)象在瀏覽的時(shí)候,鼠標(biāo)移上去就會(huì)有一個(gè)小提示框出來,并顯示title定義的內(nèi)容。2010-12-12
JS生成不重復(fù)的隨機(jī)數(shù)組的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄狫S生成不重復(fù)的隨機(jī)數(shù)組的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
JavaScript 封裝Ajax傳遞的數(shù)據(jù)代碼
在使用Ajax傳輸數(shù)據(jù)時(shí),少不了對(duì)傳遞的字符進(jìn)行轉(zhuǎn)碼,我的實(shí)現(xiàn)方式是將需要傳遞的數(shù)據(jù)暫存到一js Bean中,將js Bean放到Array中,生成傳輸參數(shù)時(shí)對(duì)Array中的jsBean進(jìn)行分解,得到相應(yīng)屬性信息并編碼..2009-06-06
uni-app實(shí)現(xiàn)微信小程序長(zhǎng)按拍視頻功能
這篇文章主要為大家詳細(xì)介紹了uni-app實(shí)現(xiàn)微信小程序長(zhǎng)按拍視頻功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08
javascript jquery對(duì)form元素的常見操作詳解
下面小編就為大家?guī)硪黄猨avascript jquery對(duì)form元素的常見操作詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06

