js實現(xiàn)的倒計時按鈕實例
更新時間：2015年06月24日 17:18:26 作者：第2015換個昵稱
這篇文章主要介紹了js實現(xiàn)的倒計時按鈕,實例分析了javascript倒計時效果的相關實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了js實現(xiàn)的倒計時按鈕。分享給大家供大家參考。具體分析如下：
效果圖如下：
具體代碼如下：
<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("免費獲取");
}
else{
printnr = (wait/1000) - num;
$("#rulesubmit").val("免費獲取(" + printnr +")");
}
};
var timer = function(){
$("#rulesubmit").attr("disabled",false);
$("#rulesubmit").val("免費獲取");
};
$(function(){
(function(){
function getValidateCode(){
$("#rulesubmit").val("免費獲取(" + 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();
});
})();
//注意，我這里在測試的時候改成里匿名函數，其實不必這樣做也可以實現(xiàn)
//getValidateCode()當作一個單獨的函數，在$(function(){//點擊按鈕執(zhí)行函數，即上面藍色部分代碼;});
});
</script></span>
這里只是一個小例子，在實際運用中，可能需要記錄各種時間，考慮到頁面刷新的變化，需要用cookie來進行數據存儲等等！
希望本文所述對大家的javascript程序設計有所幫助。
您可能感興趣的文章:
- js代碼實現(xiàn)點擊按鈕出現(xiàn)60秒倒計時
- js實現(xiàn)點擊注冊按鈕開始讀秒倒計時的小例子
- 點擊按鈕出現(xiàn)60秒倒計時的簡單js代碼(推薦)
- JS自動倒計時30秒后按鈕才可用(兩種場景)
- JS實現(xiàn)發(fā)送短信驗證后按鈕倒計時功能(防止刷新倒計時失效)
- 基于JavaScript實現(xiàn)手機短信按鈕倒計時(超簡單)
- ionic+AngularJs實現(xiàn)獲取驗證碼倒計時按鈕
- Angular.js實現(xiàn)獲取驗證碼倒計時60秒按鈕的簡單方法
- javascript顯示倒計時控制按鈕的簡單實現(xiàn)
- JS實現(xiàn)的倒計時恢復按鈕點擊功能【可用于協(xié)議閱讀倒計時】
相關文章
JavaScript實現(xiàn)頁面實時顯示當前時間的簡單實例
這篇文章介紹了頁面實時顯示當前時間的簡單實例，有需要的朋友可以參考需要2013-07-07
本篇文章主要是對javascript實現(xiàn)數字驗證碼的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
200行HTML+JavaScript實現(xiàn)年會抽獎程序
這篇文章主要為大家詳細介紹了HTML+JavaScript實現(xiàn)年會抽獎程序的200行代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
JavaScript Title、alt提示（Tips）實現(xiàn)源碼解讀
我們知道給某些HTML標簽加上title屬性后，這個標簽對象在瀏覽的時候，鼠標移上去就會有一個小提示框出來，并顯示title定義的內容。2010-12-12
下面小編就為大家?guī)硪黄狫S生成不重復的隨機數組的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
在使用Ajax傳輸數據時，少不了對傳遞的字符進行轉碼，我的實現(xiàn)方式是將需要傳遞的數據暫存到一js Bean中，將js Bean放到Array中，生成傳輸參數時對Array中的jsBean進行分解，得到相應屬性信息并編碼..2009-06-06
這篇文章主要為大家詳細介紹了uni-app實現(xiàn)微信小程序長按拍視頻功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了js實現(xiàn)YouKu的漂亮搜索框效果的方法,通過javascript結合鼠標事件與頁面樣式實現(xiàn)漂亮的搜索框效果,非常具有實用價值,需要的朋友可以參考下2015-08-08
javascript jquery對form元素的常見操作詳解
下面小編就為大家?guī)硪黄猨avascript jquery對form元素的常見操作詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要為大家詳細介紹了Bootstrap中CSS的使用方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02