CODEWITHSUNDEEP
jqueryhtmlcssanimation
Jacinto
Jacinto

Reputation: 558

Random Number Effect In Jquery

I am stuck. I am trying to get jquery to on load of the page generate an animation using numbers. So that the number 5 would be switching between 0 - 9 until the allotted time was up or if I have 50 the 5 would be going through 0 - 9 and the 0 would also being going through 0 - 9.

Thank you all for your answers and suggestions.

Upvotes: 2

Views: 9214

Answers (4)

user1642018
user1642018

Reputation:

here it is random number changer with jquery using animate effect. http://jsfiddle.net/ZDsMa/94/

var output, started, duration, desired;

// Constants
duration = 5000;
desired = '50';

// Initial setup
output = $('#output');
started = new Date().getTime();

// Animate!
animationTimer = setInterval(function() {
    // If the value is what we want, stop animating
    // or if the duration has been exceeded, stop animating
    if (output.text().trim() === desired || new Date().getTime() - started > duration) {
        console.log('animating');
        // Generate a random string to use for the next animation step
        output.text('' + Math.floor(Math.random() * 990)

        );

    } else {
        console.log('animating');
        // Generate a random string to use for the next animation step
        output.text('' + Math.floor(Math.random() * 990)

        );
    }
}, 1000);

you can change the values in it

Upvotes: 2

Alex Wayne
Alex Wayne

Reputation: 187034

Here's a simple solution, commented and light on the jQuery.

Basically, you can use setInterval to run some function every X milliseconds. When the duration is expired, or you have your desired value, you can clearInterval which stops the cycle completely.

Working example: http://jsfiddle.net/ZDsMa/1

var output, started, duration, desired;

// Constants
duration = 5000;
desired = '50';

// Initial setup
output = $('#output');
started = new Date().getTime();

// Animate!
animationTimer = setInterval(function() {
    // If the value is what we want, stop animating
    // or if the duration has been exceeded, stop animating
    if (output.text().trim() === desired || new Date().getTime() - started > duration) {
        clearInterval(animationTimer);
    } else {
        // Generate a random string to use for the next animation step
        output.text(
            ''+
            Math.floor(Math.random() * 10)+
            Math.floor(Math.random() * 10)
        );
    }
}, 100);

Upvotes: 2

Sean H Jenkins
Sean H Jenkins

Reputation: 1780

If you want a way to randomise a number in jquery try

Math.floor(Math.random()*100)

Math.random() creates a number between 0.0 and 1.0

Upvotes: 0

simshaun
simshaun

Reputation: 21466

I was bored. Here:

(function($){
    $.fn.extend({
        numAnim: function(options) {
            if ( ! this.length)
                return false;

            this.defaults = {
                endAt: 2560,
                numClass: 'autogen-num',
                duration: 5,   // seconds
                interval: 90  // ms
            };
            var settings = $.extend({}, this.defaults, options);

            var $num = $('<span/>', {
                'class': settings.numClass 
            });

            return this.each(function() {
                var $this = $(this);

                // Wrap each number in a tag.
                var frag = document.createDocumentFragment(),
                    numLen = settings.endAt.toString().length;
                for (x = 0; x < numLen; x++) {
                    var rand_num = Math.floor( Math.random() * 10 );
                    frag.appendChild( $num.clone().text(rand_num)[0] )
                }
                $this.empty().append(frag);

                var get_next_num = function(num) {
                    ++num;
                    if (num > 9) return 0;
                    return num;
                };

                // Iterate each number.
                $this.find('.' + settings.numClass).each(function() {
                    var $num = $(this),
                        num = parseInt( $num.text() );

                    var interval = setInterval( function() {
                        num = get_next_num(num);
                        $num.text(num);
                    }, settings.interval);

                    setTimeout( function() {
                        clearInterval(interval);
                    }, settings.duration * 1000 - settings.interval);
                });

                setTimeout( function() {
                    $this.text( settings.endAt.toString() );
                }, settings.duration * 1000);
            });
        }
    });
})(jQuery);

Test HTML:

<span id="number"></span>

Usage:

$("#number").numAnim({
    endAt: 97855,
    duration: 3
});

Upvotes: 13

Related Questions