进度条计时器暂停时钟

Question

我的应用程序中有一个进度条，当计时器减少时会增加进度条。我遇到了一个问题，我的意思是有一个暂停弹出窗口，当用户点击时应暂停计时器，一旦他点击从暂停状态开始恢复进度栏。 下面是我的代码，请让我知道需要做才能使什么work.Thanks

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