Question

我正在制作一个项目，当我点击按钮时，进度条会启动一段时间，通常为30到60秒。此进度条在jquery中生成，演示可在此页面http://www.jqueryscript.net/demo/Easy-jQuery-Progress-Bar-Timer-Plugin-For-Bootstrap-3-progressTimer/

上找到

我已经在我的项目中实现了这个，因为它完全符合我的需要。现在我需要做的是当计时器完成＆＃34;进度条＆＃34;和＃34;做到了！＆＃34;但是应该自动隐藏并显示另一个元素，例如验证码。由于我有一周的jquery，我不知道该怎么做。这是我的代码以及＆＃34;进度条脚本的代码＆＃34;。

我的页面：

<!-- 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();
           }
      });
});

jQuery进度条样式倒计时器

1 个答案: