2015-11-05 14:50
浏览 63


I am making a project where when I click the button a progress bar starts for a certain period usually 30 to 60 seconds. This progress bar is made in jquery and demo is available on this page

I have implemented this on my project as it exactly suits my need. Now what I need to do is that when the timer completes the "Progress bar" and the "Do it!" but should hide automatically and display some another element say a captcha for verification. As I have a week hand on jquery I am not sure how to do it. Here is my code as well as the code of the "Progress bar script".

My page:

<!-- AD TIMER -->
<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=""></script> 
<script src=""></script> 
<script src="css/jquery.progressTimer.js"></script> 
            $("#startProgressTimer").click(function() {
                    timeLimit: $("#restTime").val()
<script type="text/javascript">

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

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

<!-- AD TIMER END -->


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

        this.each(function () {
            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);


            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)

                if (elapsed >= limit) {




            }, 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

What should I modify to make it work? Please help me experts..!

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dtpt75860 2015-11-05 14:55

    Use onFinish event to add your function to hide elements :

    $("#startProgressTimer").click(function() {
               timeLimit: $("#restTime").val(),
               onFinish: function(){
    解决 无用
    打赏 举报

相关推荐 更多相似问题