动画随机数生成器onclick

时间:2017-04-06 12:14:29

标签: javascript jquery

我有这个脚本,一旦点击一个按钮就会生成一个0到13之间的随机数。但是我想添加某种动画,所以当点击按钮时,它看起来每次都有效。比如每次在确定其最终数字之前闪烁其他随机数,类似于骰子。我到目前为止只生成随机数的javascript代码就是这个;

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

最好的方法是什么?

很像这个例子:http://jsfiddle.net/ZDsMa/1/但显然不像那个

那样破碎

1 个答案:

答案 0 :(得分:1)

如果其他人试图找出相同内容以供将来参考:

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


}

*需要jquery