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.
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
});
id= to class= and update the jQuery selector to .number.jquery.numanim.js, include it in your page, and have your page use my answer's second block of js.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);
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
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
Math.random() a function provided by the standard JavaScript runtime. And the distinction is important, especially for beginners because they treat jQuery as it's own language and never learn good JavaScript. And that is a tragedy; a tragedy I want to avoid here. Write JS. Use jQuery!