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í)間,考慮到頁(yè)面刷新的變化,需要用cookie來(lái)進(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è)按鈕開(kāi)始讀秒倒計(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)頁(yè)面實(shí)時(shí)顯示當(dāng)前時(shí)間的簡(jiǎn)單實(shí)例
這篇文章介紹了頁(yè)面實(shí)時(shí)顯示當(dāng)前時(shí)間的簡(jiǎn)單實(shí)例,有需要的朋友可以參考需要2013-07-07javascript實(shí)現(xiàn)數(shù)字驗(yàn)證碼的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)javascript實(shí)現(xiàn)數(shù)字驗(yàn)證碼的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02200行HTML+JavaScript實(shí)現(xiàn)年會(huì)抽獎(jiǎng)程序
這篇文章主要為大家詳細(xì)介紹了HTML+JavaScript實(shí)現(xiàn)年會(huì)抽獎(jiǎng)程序的200行代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01JavaScript Title、alt提示(Tips)實(shí)現(xiàn)源碼解讀
我們知道給某些HTML標(biāo)簽加上title屬性后,這個(gè)標(biāo)簽對(duì)象在瀏覽的時(shí)候,鼠標(biāo)移上去就會(huì)有一個(gè)小提示框出來(lái),并顯示title定義的內(nèi)容。2010-12-12JS生成不重復(fù)的隨機(jī)數(shù)組的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JS生成不重復(fù)的隨機(jī)數(shù)組的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07JavaScript 封裝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-06uni-app實(shí)現(xiàn)微信小程序長(zhǎng)按拍視頻功能
這篇文章主要為大家詳細(xì)介紹了uni-app實(shí)現(xiàn)微信小程序長(zhǎng)按拍視頻功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08javascript jquery對(duì)form元素的常見(jiàn)操作詳解
下面小編就為大家?guī)?lái)一篇javascript jquery對(duì)form元素的常見(jiàn)操作詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06