进度条计时器暂停时钟

Question

我的应用程序中有一个进度条，当计时器减少时，进度条会增加。我遇到了一个问题，我的意思是有一个暂停弹出窗口，当用户单击时应该暂停计时器，一旦他单击恢复，进度条就会从暂停的位置开始。下面是我的代码，请让我知道需要做什么才能使其工作。谢谢

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

Answer 1

在代码库上添加了功能。

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