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

进度条定时器暂停时钟

1 个答案: