Creating a Script To Increase Numbers On Website

Question

We have a website, on the front page we show "Parcels Shipped", we'd love the numbers to updated via a formula - i.e. we shipped 34,502,233 parcels in 2014... We show a static stat.... But we'd love to have the numbers increased via a formula that increases the number by the second/minute

Thanks for all the replies guys - So we current have this: gyazo.com/d421a3675884e2610d368c9e60e8acca

we want it to increase around 76 times per minute.... so a rotating number basically - i've no idea how to achieve this. (left number) & We want it to increase around 43 times per minute for middle number

Does anyone know where I can find this sort of trick?

Do you want it to be an actual number? If so you will need to use a server side language. — Adam Buchanan Smith, Sep 08 '15 at 22:07
You just need a formula based on time and use JS to get the time and update the number every second — Joseph Evans, Sep 08 '15 at 22:08
Thanks for all the replies guys - So we current have this: https://gyazo.com/d421a3675884e2610d368c9e60e8acca But we want it to increase around 2 every 15 seconds — Dan Hawkins, Sep 08 '15 at 22:17
Left and middle numbers should both increase by 2 every 15 seconds? — hopkins-matt, Sep 08 '15 at 22:20
Sorry - we want it to increase around 76 times per minute.... so a rotating number basically - i've no idea how to achieve this. (left number) — Dan Hawkins, Sep 08 '15 at 22:20
We want it to increase around 43 times per minute for middle number — Dan Hawkins, Sep 08 '15 at 22:21

score 2 · Accepted Answer · edited May 23 '17 at 11:44

This achieves your desired functionality using setInterval() to fire a function that checks to see how long it's been since today. Then, multiplying by the increase you mentioned in the comments and adding it to the numbers in your screenshot.

JS:

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

HTML:

<h3>Left</h3>
<span id="left"></span>

<h3>Mid</h3>
<span id="mid"></span>

Demo: http://jsfiddle.net/hopkins_matt/513ng07d/

Used info from these answers to build this:

Perfect Matt- many thanks :) – Dan Hawkins Sep 09 '15 at 09:42 — Dan Hawkins, Sep 09 '15 at 09:42

Pavel Gatnar · Answer 2 · 2015-09-08T22:16:51.770

0

Use setInterval with the increasing function as 1st argument and ms as the 2nd one.

var el = document.getElementById('counter')
var x = 0
window.setInterval(function(){
  el.value = formula(++x)
}, 1000)

edited Sep 08 '15 at 22:16

answered Sep 08 '15 at 22:10

Pavel Gatnar

3,987
2
19
29

score 0 · Answer 3 · answered Sep 08 '15 at 22:20

0

If the increase is completly random, just a "front-end design stuff" (sorry, guys), you can use setInverval() from Javascript.

It works this way: every _s ms, the function will be called. If you have an increase factor, like a global constant you could do something like:

var myDiv = document.getElementById("myId");
var _mseconds = 1500; // mileseconds
var incFactor = 150;
var handlerInt = setInverval(function() {
 myDiv.innerHTML = incFactor+incFactor; // you can use Math.Random() or something, instead
}, _mseconds);

Hope it helps!

answered Sep 08 '15 at 22:20

lockedz

219
6
15

Thanks for the reply :) - So we current have this: gyazo.com/d421a3675884e2610d368c9e60e8acca we want it to increase around 76 times per minute.... so a rotating number basically - i've no idea how to achieve this. (left number) & We want it to increase around 43 times per minute for middle number – Dan Hawkins Sep 08 '15 at 22:24
@DanHawkins well, first you would need not to use an image - `divs`, instead. The document.getElementById(id) is something you might wanna have a look: you're certainly use! You can create two variables with different increase factors (As far I've seen, constant factors: 76 and 43). Each `setInverval()` must have a handler, so you can mess with them when needed. The seconds argument is in ms, so per minute 60000 would fit. – lockedz Sep 08 '15 at 22:30
TL;DR; you should replace the `` with at least two `
`, with unique IDs, then use `setInverval()` with the apropriate values (which you already have in mind!) :)
– lockedz Sep 08 '15 at 22:34
Don't worry about the image, that was just to show the stats :) they are text in div's - I'll take a look at the getElementById :) Many thanks for pointing me in the right direction, Would this be a permanent change to the number - or would this only apply for each time the page is loaded? Thanks @lockedz Dan – Dan Hawkins Sep 08 '15 at 22:36
@DanHawkins the initial number would be constant... unless you created a range (just to look different each time) of a randomic set of numbers, then they would always show different initial numbers but still the same increase factor. The only problem I see with this approach is that sometime, within the range [x...y...z], x < y < z, you could get a z as an initial number and next time page is reloaded, boom, you get an x. That could be odd. – lockedz Sep 08 '15 at 22:40

Creating a Script To Increase Numbers On Website

3 Answers3

Demo: http://jsfiddle.net/hopkins_matt/513ng07d/