jQuery的進度條風格倒計時

Question

我想提出一個項目，當我點擊進度條開始一段時間通常爲30〜60秒鐘。該進度條jQuery中提出和演示可用此頁http://www.jqueryscript.net/demo/Easy-jQuery-Progress-Bar-Timer-Plugin-For-Bootstrap-3-progressTimer/

我已經實現了這個在我的項目，因爲它正好符合我的需要上。現在我需要做的是，當計時器完成「進度條」和「做它！」但應該自動隱藏並顯示一些其他元素說驗證驗證碼。正如我有一個星期的手jquery，我不知道該怎麼做。這裏是我的代碼以及「進度條腳本」的代碼。

我的頁面：

<!-- AD TIMER --> 
<div> 
<input type="hidden" id="restTime" value="<?php echo $ad_timer; ?>" disabled style="width: 50px; margin-left: 350px; margin-top: -70px; text-indent:10px" /> 
<button id="startProgressTimer" style="margin-top: -65Mpx; height: 45px; width: 90px; margin-left: 430px;">START</button> 
<div id="progressTimer" style="width:400px; margin-left: 530px; margin-top: -34px"></div> 
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> 
<script src="css/jquery.progressTimer.js"></script> 
<script> 
      $("#startProgressTimer").click(function() { 
       $("#progressTimer").progressTimer({ 
        timeLimit: $("#restTime").val() 
       }); 
      }); 
</script> 
<script type="text/javascript"> 

    var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-36251023-1']); 
    _gaq.push(['_setDomainName', 'jqueryscript.net']); 
    _gaq.push(['_trackPageview']); 

    (function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 

</script> 
</div> 
<!-- AD TIMER END --> 

jquery.progressTimer.js

(function ($) { 
    $.fn.progressTimer = function (options) { 
     var settings = $.extend({}, $.fn.progressTimer.defaults, options); 

     this.each(function() { 
      $(this).empty(); 
      var barContainer = $("<div>").addClass("progress active progress-striped"); 
      var bar = $("<div>").addClass("progress-bar").addClass(settings.baseStyle) 
       .attr("role", "progressbar") 
       .attr("aria-valuenow", "0") 
       .attr("aria-valuemin", "0") 
       .attr("aria-valuemax", settings.timeLimit); 

      bar.appendTo(barContainer); 
      barContainer.appendTo($(this)); 

      var start = new Date(); 
      var limit = settings.timeLimit * 1000; 
      var interval = window.setInterval(function() { 
       var elapsed = new Date() - start; 
       bar.width(((elapsed/limit) * 100) + "%"); 

       if (limit - elapsed <= 5000) 
        bar.removeClass(settings.baseStyle) 
         .removeClass(settings.completeStyle) 
         .addClass(settings.warningStyle); 

       if (elapsed >= limit) { 
        window.clearInterval(interval); 

        bar.removeClass(settings.baseStyle) 
         .removeClass(settings.warningStyle) 
         .addClass(settings.completeStyle); 

        settings.onFinish.call(this); 

       } 

      }, 250); 

     }); 

     return this; 
    }; 

    $.fn.progressTimer.defaults = { 
     timeLimit: 60, //total number of seconds 
     warningThreshold: 5, //seconds remaining triggering switch to warning color 
     onFinish: function() {}, //invoked once the timer expires 
     baseStyle: '', //bootstrap progress bar style at the beginning of the timer 
     warningStyle: 'progress-bar-danger', //bootstrap progress bar style in the warning phase 
     completeStyle: 'progress-bar-success' //bootstrap progress bar style at completion of timer 
    }; 
}(jQuery)); 

我應該怎麼修改，使其工作？請幫助我的專家..！

Answer 1

使用onFinish事件中加入你的函數隱藏要素：

$("#startProgressTimer").click(function() { 
     $("#progressTimer").progressTimer({ 
      timeLimit: $("#restTime").val(), 
      onFinish: function(){ 
       $('#startProgressTimer').hide(); 
       $('#progressTimer').hide(); 
      } 
     }); 
});