Question

我正在开发一个小小的“网络应用”进行测验。每张幻灯片都有一定的时间来回答（或0到无限时间）。

我在这里找到JS做倒计时：

        function Countdown(options) {
            var timer,
                    instance = this,
                    seconds = options.seconds || 10,
                    updateStatus = options.onUpdateStatus || function () {},
                    counterEnd = options.onCounterEnd || function () {};

            function decrementCounter() {
                updateStatus(seconds);
                if (seconds === 0) {
                    counterEnd();
                    instance.stop();
                }
                seconds--;
            }

            this.start = function () {
                clearInterval(timer);
                timer = 0;
                seconds = options.seconds;
                timer = setInterval(decrementCounter, 1000);
            };

            this.stop = function () {
                clearInterval(timer);
            };
        }
 var myCounter = new Countdown({
                    seconds: timetogo, // number of seconds to count down
                    onUpdateStatus: function (sec) {
                        elapsed = timetogo - sec;
                        $('.progress-bar').width(((elapsed / timetogo) * 100) + "%");
                    }, // callback for each second
                    onCounterEnd: function () {
                        //alert('counter ended!');
                    } // final action
                });

                myCounter.start();

我在这里做了一个jsfiddle：

https://jsfiddle.net/mitchum/kz2400cc/2/

但是当你进入下一张幻灯片时，我遇到了麻烦，进度条“碰撞”。在查看“Chrome的实时源面板”后，我看到它就像第一个“计数器”没有停止并仍在运行。

你有任何提示或暗示可以帮助我解决我的错误吗？

由于

Answer 1

您必须注意变量的范围。我在“var myCounterFirst”中更改了文档就绪下的“var myCounter”。 Check the updated JSFiddle

  var timetogoFirst = $('.current').attr("data-time");
  var myCounterFirst = new Countdown({
    seconds: timetogoFirst, // number of seconds to count down
    onUpdateStatus: function (sec) {
      elapsed = timetogoFirst - sec;
      $('.progress-bar').width(((elapsed / timetogoFirst) * 100) + "%");
    }, // callback for each second
    onCounterEnd: function () {
      alert('counter ended!');
    } // final action
  });
  myCounterFirst.start();

倒计时和引导进度条“碰撞”

1 个答案: