Animate random number generator onclick

Question

I have this script that once clicking a button will generate a random number between 0 and 13. However I'd like to add some kind of animation so when the button is clicked it looks like it's working each time. Such as flashing other random numbers each time before settling on it's final number, simular to dice. The javascript code I have so far just to generate the random number is this;

function newNumber() {
var x = Math.floor((Math.random() * 14) + 0);
document.getElementById("number").innerHTML = x;
}

what would be the best way to go about this?

much like this example: http://jsfiddle.net/ZDsMa/1/ but obviously not as broken as that

That you are new to Java has little bearing on this question. Please be specific on what exactly you want. "Such as flashing other random numbers" is exactly what the fiddle does. — trincot, Apr 06 '17 at 12:17
how would I go about adding the j query into that. I've tried off the j fiddle example and I couldn't get it to work with the function — user3438298, Apr 06 '17 at 12:26
the jfiddle example doesn't work on a random number result only on a set desired result. How would I get an animation to work on a random generator? — user3438298, Apr 06 '17 at 12:42
Remove the desired variable from the flow? http://jsfiddle.net/ZDsMa/785/ — Rick Calder, Apr 06 '17 at 13:04
@user3438298: Have a look at these samples and learn thru the code - (1) https://jsfiddle.net/abhitalks/u2r7fc8d/ and (2) http://jsfiddle.net/abhitalks/azfs848x/ which is [adopted from this answer](http://stackoverflow.com/a/33474923/1355315) — Abhitalks, Apr 06 '17 at 13:15
Thank you Rick - the only helpful answer here. It worked taking out the the desired value and changing the math.floor sum at the bottom too. — user3438298, Apr 06 '17 at 13:21
sorry I didn't see your post there Abhitalks. I will look at that too. Thank you — user3438298, Apr 06 '17 at 13:29

score 1 · Answer 1 · answered Apr 06 '17 at 13:26

for future reference if someone else is trying to figure out the same:

function newNumber() {
    var x = Math.floor((Math.random() * 14) + 0);
    document.getElementById("dice").innerHTML = x;


    var output, started, duration, desired;

// Constants
duration = 1000;


// Initial setup
output = $('#dice');
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 {
        console.log('animating');
        // Generate a random string to use for the next animation step
        output.text(
            ''+
            Math.floor((Math.random() * 14) + 0)
        );
    }
}, 100);


}

*requires jquery

Animate random number generator onclick

1 Answers1