訓練家的佈弱格-Patch1.2

The BLOG of trainer



編輯日期:2015-02-22 14:00

類型:網頁設計心得
作者:羽山
文章時間:2015-02-22 14:00:00
瀏覽人數:3713人
標題: 倒數計時按鈕
網址:https://3wa.tw/blog/blog.php?id=1446
內容:
 

放假前寫了一個倒數計時按鈕的功能

有時你在輸入完表單,常常會看到一個倒數計時的按鈕。

這個按鈕常常出現在閱讀權利宣言,或網站對您的個資有進一步說明的地方。

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

首頁  上十頁  上一頁  1 下一頁    最末頁 (總共有...1頁)

第 1 頁

有話要說  看留言 【0】
其他分類
當月訓練
(2015-02-22)
【網頁設計心得】倒數計時按鈕

(2015-02-03)
【網頁設計心得】使用 PHP 取得衛星資料站查詢結果

最新訓練
(2024-12-02)
【NSR 150】NSR150 改裝回 14T

(2024-11-04)
【酷龍 150】酷龍150 換新鏈條 里程:39250km

(2024-10-31)
【機車綜合相關】煞車檢測筆測量電阻範圍

(2024-10-29)
【機車綜合相關】拆胎特工-輪胎拆胎架

(2024-10-25)
【NSR 150】NSR150 更換前煞車油(簡易) 43177km

(2024-10-25)
【網誌】加密文章測試

(2024-10-19)
【本田 MSX-125】MSX-125 更換前輪軸承

(2024-10-18)
【HONDA CBR1000RR】CBR1000RR 側柱維修

(2024-10-15)
【KTM 390】KTM RC390 側柱增加 1.5cm

(2024-10-12)
【NSR 150】NSR150 更換空濾綿 43010km