Creating Spinning Numbers until total is reached

Question

I had some help yesterday to achieve this: http://jsfiddle.net/hopkins_matt/513ng07d/ (Thanks to Matt Hopkins) -----

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function timeSince() {
    var prevTime = new Date(2015,8,8,0,0);
    var thisTime = new Date();
    return (thisTime.getTime() - prevTime.getTime()) / 1000;
}

function parcelCount() {
    var secDiff = timeSince();

    var leftNum = document.getElementById("left");
    var midNum = document.getElementById("mid");
    var leftNumCount = Math.round(((76/60) * secDiff) + 40093794);
    var midNumCount = Math.round(((43/60) * secDiff) + 22874098);

    leftNum.innerHTML = numberWithCommas(leftNumCount);
    midNum.innerHTML = numberWithCommas(midNumCount);
}
parcelCount();
setInterval(parcelCount, 1000);

I also want to create a spinning total until the final figure is reached...

I.E. We have shipped to 190 countries, is it possible to spin this number from 0-190 when the text is reached on screen?

So it would spin numbers until it reached the 190, then stop.

Any help would be appreciated :)

score 2 · Accepted Answer · answered Sep 09 '15 at 12:32

2

If you want just an animation from 0 - 190 you can use this.

Just loop one function increasing your display variable.

var totalShipped = 190;
var shippedDisplay = 0;
var shippedStep = totalShipped / (2 * 1000 / 100); // Animation duration 2 sec
function animateShipped() {
  if (shippedDisplay > totalShipped)
    shippedDisplay = totalShipped;
  document.getElementById("shipped").innerHTML = Math.round(shippedDisplay);
  if (shippedDisplay < totalShipped) {
    shippedDisplay += shippedStep;
    setTimeout(animateShipped, 100);
  }
}
animateShipped();

<h3>Shipped</h3>
<span id="shipped"></span>

answered Sep 09 '15 at 12:32

GramThanos

3,572
1
22
34

Thanks for that - is there a way to only trigger this when the element is reached on the page (like lazyload effects) ? – Dan Hawkins Sep 15 '15 at 11:32
The easy way to do it can be found here http://stackoverflow.com/questions/5911138/jquery-trigger-function-when-element-is-in-viewport , just call `animateShipped()` . You may want to set a global variable to remember if it is already animated, like `if(!window.shippedAnim){window.shippedAnim=true;animateShipped()}` – GramThanos Sep 15 '15 at 15:32

Creating Spinning Numbers until total is reached

1 Answers1