Increment div content by a random value each second using jQuery

Question

I have a div with a integer content in it.

<div class="count">12,747,822</div>

I want to increase the content of it by a random number between 2 to 5 every second. Here is what I've tried so far

<script type="text/javascript">
    function randomIntFromInterval(min,max) {
        return Math.floor(Math.random()*(max-min+1)+min);
    }

    $(document).ready(function(){
        $('.count').html(function(i, val) { return +val+randomIntFromInterval(2,5) });
    });
</script>

For some reason this creates a blank div. How should I approach this?

@user3725362, http://jsfiddle.net/satpalsingh/6L3LJ/ However format the number as you want — Satpal, Jul 07 '14 at 06:44
@Jeremy Your answer works perfect. Add it as answer so I can choose it as accepted answer. Also, please add a bit information regarding the logic you chose. — user3725362, Jul 07 '14 at 06:44

score 4 · Accepted Answer · edited May 23 '17 at 10:29

4

You need to parse the html to a number (integer) using parseInt, then you need to make it back into a string and put commas back in as thousands separators: How to print a number with commas as thousands separators in JavaScript

And finally you need an interval to run the code over and over every second.

function randomIntFromInterval(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);
}

$(document).ready(function(){
    setInterval(function() {
        $('.count').html(function(i, val) {
            val = val.replace(/,/g,'');
            return (parseInt(val,10)+randomIntFromInterval(2,5)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        })
    }, 1000);

});

JSFiddle

edited May 23 '17 at 10:29

Community

1
1

answered Jul 07 '14 at 06:38

forsvunnet

1,238
10
17

You can use `.toLocaleString()` instead of that ghastly regex expression... =/ Then no need for your `.toString()` conversion either. – jeremy Jul 07 '14 at 06:38
@Jeremy `.toLocaleString()` has spotty browser support, but thanks for the suggestion :) – forsvunnet Jul 07 '14 at 06:42
Err... every major browser supports it... so not really =/ – jeremy Jul 07 '14 at 06:43
@Jeremy True, the function is supported but the arguments are not. Which means that the many users will receive number formatting according to their device locale and the output would not be consistent. For consistency I would prefer using regex. – forsvunnet Jul 07 '14 at 06:49

score 0 · Answer 2 · answered Jul 07 '14 at 07:31

Hope this helps

   function rndint(min,max)
        {
            return Math.floor(Math.random()*(max-min+1)+min);
        }

   function updateVal(){
            var curval=$('.count').html().trim();
            if(curval===undefined || curval.length==0)
                curval=0;
            curval=curval.replace(/\,/g,'');
            curval=(parseInt(curval)+(0+parseInt(rndint(2,5))));
            var s=(curval+"").split('');
            var res="";
            var i=0;
            //Reverse keys for comma insertion after 3 chars
            var keys = new Array();
            for (var k in s) {
                keys.unshift(k);
            }
            for (var c = keys.length, n = 0; n < c; n++) {
                res=""+s[keys[n]]+res;
                if((i+1)%3==0 && i !=s.length-1)
                    res=","+res;
                i++;
            }
            $('.count').html(res);

   }
        $(document).ready(function(){
            setInterval(updateVal, 3000);
        });

Increment div content by a random value each second using jQuery

2 Answers2