Question

I have a strange client request that doesn’t seem to fit any off-the-shelf jQuery plugins and I’m struggling to work out how best to implement.

Basically it’s for a counter representing the co2 emissions projected to have been saved.
The idea is that the counter will run based on the previous months’ figures.

So at the start of each month a web admin will set the start / end values.

Then over the month the page needs to load at a start point (calculated in PHP based on the date versus start point), then increment from there every 5 seconds.

So in an example:

startValue = 200000;
endValue = 225000;
updateInterval = 5; /* seconds */

We’d have 25,000 units to count up during that time.
This 25,000 should be divided by the number of 5 second increments in a month and the counter needs to increase every 5 seconds.

I think I finally understand the theory (my client sent it in the most convoluted explanation!) but I’m struggling to work out how to tackle it.

I think it’s simple… but would appreciate some pointers to get me on the way!

Thanks,
Steve

Answer 1

maybe something to start:

html:

<div id="start">20</div>
<div id="end"></div>
<div id="interval">5</div>

js:

var start    = 21;
var end      = 25;
var interval = 5000;    

var refreshIntervalId = setInterval(function(){
   if(start <= end){
      $("#start").text(start++);
   }else{
      stop();   
   }
},interval);

function stop(){
   clearInterval(refreshIntervalId);    
}​

Demo