Geek Answers Handbook

JQuery countdown when it is paused

I am using a Keith Wood jQuery countdown timer. http://keith-wood.name/countdown.html

What I want to achieve is a counter with stop and resume buttons, as well as controls for adding and subtracting minutes and seconds:

I create a counter (from 0 to 60 minutes) and pause it immediately, for example:

$('#contador_tiempo').countdown({ since: 0, format: 'MS', layout: '{mnn}{sep}{snn}' }); $('#contador_tiempo').countdown('pause');

But it looks like it is still running in the background. When I press the buttons to add or subtract, the functions perform operations on this background counter, not the displayed counter.

Full code on JSFiddle, with playback playback:

http://jsfiddle.net/J2XHm/4/

(play around with the controls a bit and you will see that it continues to count, although it is paused.)

+4
source share
2 answers

Yes, there is an error in the getTimes command - it is recounted when paused. I will make a correction in the next version (1.6.2), but for now you can change the _getTimesPlugin function:

 _getTimesPlugin: function(target) { var inst = $.data(target, this.propertyName); return (!inst ? null : (inst._hold == 'pause' ? inst._savePeriods : (!inst._hold ? inst._periods : this._calculatePeriods(inst, inst._show, inst.options.significant, new Date())))); },
+1
source

If you can take the easy code, that is, without using a jQuery countdown timer, the following may help you:

 <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://localhost/web/JavaScript/jQuery/jquery"></script> <script type="text/javascript"> var countUpSeconds = 0; var interval = null; function displayTime() { $("#timeContainer").text(format(Math.floor(countUpSeconds/60))+":"+format(countUpSeconds%60)); } function playStop() { if(interval) {interval=window.clearInterval(interval);} else {interval = window.setInterval(countUp, 1000);} } function countUp() { ++countUpSeconds; if(countUpSeconds >= 3600) {/* do something when countup is reached*/} displayTime(); } function format(s) {return s<10 ? "0"+s : s;} $(function() { displayTime(); $("#playStop").on("click", function () { playStop(); } ); $("#addMin").on("click", function () { countUpSeconds += 60; displayTime(); } ); $("#subMin").on("click", function () { countUpSeconds = Math.max(0, countUpSeconds-60); displayTime(); } ); $("#addSec").on("click", function () { countUpSeconds += 1; displayTime(); } ); $("#subSec").on("click", function () { countUpSeconds = Math.max(0, countUpSeconds-1); displayTime(); } ); }); </script> </head> <body> <div id="timeContainer"></div> <button id="playStop">Play/Stop</button> <button id="addMin">+1 minute</button> <button id="subMin">-1 minute</button> <button id="addSec">+1 second</button> <button id="subSec">-1 second</button> </body> </html>
0
source

More articles:


All Articles