Millisecond javascript countdown

Question

I want to do a countdown and want to show how the format is in the form of minutes: seconds: milliseconds. I did the count using the jquery countdown plugin, but it shows the format "Minutes: Seconds". Is there any way to do this right? Thank you very much!

Answer 1

Hi guys, I developed a code for self using the following code counter for 20 seconds

var _STOP =0; var value=1999; function settimer() { var svalue = value.toString(); if(svalue.length == 3) svalue = '0'+svalue; else if(svalue.length == 2) svalue = '00'+svalue; else if(svalue.length == 1) svalue = '000'+svalue; else if(value == 0) svalue = '0000'; document.getElementById('cn1').innerHTML = svalue[0]; document.getElementById('cn2').innerHTML = svalue[1]; document.getElementById('cn3').innerHTML = svalue[2]; document.getElementById('cn4').innerHTML = svalue[3]; value--; if (_STOP==0 && value>=0) setTimeout("settimer();", 10); } setTimeout("settimer()", 10); 

Answer 2

Try the following: http://jsfiddle.net/aamir/TaHtz/76/

HTML:

 <div id="timer"></div> 

JS:

 var el = document.getElementById('timer'); var milliSecondsTime = 10000; var timer; el.innerHTML = milliSecondsTime/1000; timer = setInterval(function(){ milliSecondsTime = milliSecondsTime - 1000; if(milliSecondsTime/1000 == 0) { clearTimeout(timer); el.innerHTML = 'BOOOOM'; } else { el.innerHTML = milliSecondsTime/1000; } },1000);​ 

Answer 3

If you want to create your own timer. read this earlier question
How to create jQuery Clock / Timer

Answer 4

Try setting the format parameter - http://keith-wood.name/countdownRef.html#format

On further reading, this plugin does not execute milliseconds. At this point, you need to either edit the actual plugin code or find a new plugin.

Answer 5

I completely agree with the comment by @Matt Ball. It can also cause the browser to crash.

Why don't you try this solution instead

jQuery 1 minute countdown with milliseconds and callback

Answer 6

I did it like this (total counter from N to X (X> N)):

 var dynamicCounterAddNewValue = 20; var currentDynamicUpdater; function dynamicCounterForValueForControlUpdater(_updaterData) { _updaterData.from += dynamicCounterAddNewValue; if (_updaterData.from > _updaterData.to) { _updaterData.from = _updaterData.to; } _updaterData.c.html(_updaterData.from.toString()); if (_updaterData.from < _updaterData.to) { currentDynamicUpdater = setTimeout( dynamicCounterForValueForControlUpdater, 10, { c: _updaterData.c, from: _updaterData.from, to: _updaterData.to } ); } else { clearTimeout(currentDynamicUpdater); } return; } // _c -> jQuery object (div,span) // _from -> starting number // _to -> ending number function dynamicCounterForValueForControl(_c, _from, _to) { clearTimeout(currentDynamicUpdater); dynamicCounterForValueForControlUpdater( { c: _c, from: _from, to: _to } ); return; } 

EDIT: Updated version (more flexible - for N elements one after another ):

(input element is an array of elements for their dynamic calculation)

 var dynamicCounterTimeout = 10; var currentDynamicUpdater; function odcArray(_odca) { this.odca = _odca; return; } function odc(_c, _from, _to) { this.c = _c; // $('#control_id') this.from = _from; // eg N this.to = _to; // eg M => (M >= N) var di = parseInt(_to / 45, 10); if (di < 1) { di = 1; } this.dynamicInc = di; return; } function dynamicCounterForValueForControlUpdater(_odca) { if ( _odca.odca === null || !_odca.odca.length ) { clearTimeout(currentDynamicUpdater); return; } var o = _odca.odca[0]; o.from += o.dynamicInc; if (o.from > o.to) { o.from = o.to; _odca.odca.shift(); // Remove first element } ochtml(o.from.toString()); currentDynamicUpdater = setTimeout( dynamicCounterForValueForControlUpdater, dynamicCounterTimeout, _odca ); return; } function dynamicCounterForValueForControl(_odca) { clearTimeout(currentDynamicUpdater); // SETUP all counters to default for (var i = 0; i < _odca.odca.length; i++) { _odca.odca[i].c.html(_odca.odca[i].from.toString()); } dynamicCounterForValueForControlUpdater( _odca ); return; }