我的应用程序中有一个进度条,当计时器减少时,进度条会增加。我遇到了一个问题,我的意思是有一个暂停弹出窗口,当用户单击时应暂停计时器,一旦他单击继续,进度条将从该位置开始被暂停了。
下面是我的代码,请让我知道完成该工作需要做什么。

    jQuery.fn.anim_progressbar = function(aOptions) {
                var iCms = 1000;
                var iMms = 60 * iCms;
                var iHms = 3600 * iCms;
                var iDms = 24 * 3600 * iCms;

                var aDefOpts = {
                    start : new Date(),
                    finish : new Date().setTime(new Date().getTime() + 10 * iMms), // TODO get time from database
                    interval : 100
                };
                var aOpts = jQuery.extend(aDefOpts, aOptions);
                var vPb = this;

                return this.each(function() {

                    var iDuration = aOpts.finish - aOpts.start;
                    var vInterval = setInterval(function() {


                            var iLeftMs = aOpts.finish - new Date();

                            var iElapsedMs = new Date() - aOpts.start;
                            var iDays = parseInt(iLeftMs / iDms), iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0;
                            $(vPb).children('.progressbar_con').children('#progressBar').html(iMin + 'm:' + iSec + 's</b>');
                            $(vPb).children('.progressbar_con').children('#progressBar').css('width', iPerc + '%');
                            if (iPerc >= 100) {
                                $(vPb).children('.progressbar_con').children('#progressBar').html('<b>Time Over</b>');

                                clearInterval(vInterval);


                        }

                    }, aOpts.interval);

                });
            };
            $('#progressBarMain').anim_progressbar();

最佳答案

在您的代码库中添加了功能。

http://jsfiddle.net/N99Ha/2/

jQuery.fn.anim_progressbar = function(aOptions) {
                var iCms = 1000;
                var iMms = 60 * iCms;
                var iHms = 3600 * iCms;
                var iDms = 24 * 3600 * iCms;

                var aDefOpts = {
                    start : new Date(),
                    finish : new Date().setTime(new Date().getTime() + 10 * iMms), // TODO get time from database
                    interval : 100
                };
                var aOpts = jQuery.extend(aDefOpts, aOptions);
                var vPb = this;

                return this.each(function() {
                    var iElapsedMs=0,
                        iLeftMs = aOpts.finish - new Date();
                    var iDuration = aOpts.finish - aOpts.start;
                    var ticker = function() {


                            iElapsedMs += aOpts.interval;

                            iLeftMs -= aOpts.interval;

                            var iDays = parseInt(iLeftMs / iDms), iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0;
                            $(vPb).children('.progressbar_con').children('#progressBar').html(iMin + 'm:' + iSec + 's</b>');
                            $(vPb).children('.progressbar_con').children('#progressBar').css('width', iPerc + '%');
                            if (iPerc >= 100) {
                                $(vPb).children('.progressbar_con').children('#progressBar').html('<b>Time Over</b>');

                                clearInterval(vInterval);


                        }

                    };


                    var vInterval = setInterval(ticker, aOpts.interval);
                    $(vPb).find(".pause").on("click",function(){

                         clearInterval(vInterval);
                    });
                    $(vPb).find(".resume").on("click",function(){

                         vInterval = setInterval(ticker, aOpts.interval);
                    });


                });
            };
            $('#progressBarMain').anim_progressbar();

10-07 19:09
查看更多