放假前寫了一個倒數計時按鈕的功能
有時你在輸入完表單，常常會看到一個倒數計時的按鈕。
這個按鈕常常出現在閱讀權利宣言，或網站對您的個資有進一步說明的地方。
Demo：http://3wa.tw/demo/htm/counter_down_btn.php
我使用的是傳統的 javascript function 就可以操作
使用方法如下：
<head>
<script language="javascript">
$(document).ready(function(){
timedownbutton("#c","剩下時間...",10,function(){
alert('爆了...')
});
});
</script>
</head>
<body>
<input type="button" id="c">
</body>
說明：
timedownbutton( 參數1,參數2,參數3,參數4 );
參數1：
以jQuery來控制哪一個按鈕元素，支援選擇器。
參數2：
按鈕的標題。
參數3：
要倒數的秒數。
參數4：
倒數完後，會執行的 function。
程式碼如下：
function timedownbutton(button_dom,title,seconds,done_func)
{
// By 3WA John (linainverseshadow@gmail.com)
// Version : 1.0
// Method : 倒數計時按鈕
// button_dom = which buttom dom you wanna control
// title = button title
// second = wait second
// done_func = after count down. what will be going on.
if($(button_dom).size()==0)
{
return;
}
if(window['timedown_step']==null)
{
window['timedown_step']=new Array();
}
window['timedown_step'].push("REGISTED");
$(button_dom).attr('timedown',seconds);
var t = new Date().getTime()+"_"+window['timedown_step'].length;
window['time_down_func_'+t] = function(){
$(button_dom).val(
title+
"("+
parseInt($(button_dom).attr('timedown'))+
")"
);
setTimeout(function(){
if(parseInt($(button_dom).attr('timedown'))>0)
{
$(button_dom).attr('timedown',parseInt($(button_dom).attr('timedown')) -1 );
window['time_down_func_'+t]();
}
else
{
done_func();
}
},1000);
}
window['time_down_func_'+t]();
} |
第二個範例：http://3wa.tw/demo/htm/counter_down_btn1.php
3WA問題解決專家工作室