javascript - 每次用户刷新页面时都有不同的JS动画

我在网站上使用一个小动画来增加数字，请参见http://jsfiddle.net/zQ5AL/
我想做的是有2-3种不同的动画（实际上是相同的动画，但是numberValue和text会有所不同），以便每次用户刷新页面时，他都会得到不同的number（预先设置）和text（即900是鸟的数量，1300是猫的数量，80是狗的数量，等等）。我该怎么办？

非常感谢，

<p id="dynamic-number">1</p>
<p class="dynamic-text">Number of birds</p>

JS：

var currentNumber = $('#dynamic-number').text();

$({numberValue: currentNumber}).animate({numberValue: 900}, {
    duration: 2000,
    easing: 'swing',
    step: function() {
        $('#dynamic-number').text(Math.ceil(this.numberValue));
    }
});

最佳答案

这是小提琴：http://jsfiddle.net/w346Q/2/

来自Math.random（）的随机数

消息数组中的随机消息。

var currentNumber = $('#dynamic-number').text();

var randMsg = ["Number of birds", "Aeroplanes flying", "Aliens seen", "Greetings received", "Messages Sent", "Your Personal Message"];

var n = Math.floor(Math.random() * randMsg.length);

$('.dynamic-text').text(randMsg[n]);

var maxNo = 1000;

var randNo = Math.ceil(Math.random() * maxNo);

$({
    numberValue: currentNumber
}).animate({
    numberValue: randNo
}, {
    duration: 2000,
    easing: 'swing',
    step: function () {
        $('#dynamic-number').text(Math.ceil(this.numberValue));
    }
});

您可以自定义它：


更改通过更改maxNo生成的最大随机数
通过更改字符串或将字符串添加到randMsg数组来更改消息或添加消息




更新

如果您的电话号码是预定义的：http://jsfiddle.net/w346Q/4/

var currentNumber = $('#dynamic-number').text();

var randMsg = ["Number of birds", "Aeroplanes flying", "Aliens seen", "Greetings received", "Messages Sent", "Your Personal Message"];
var randNo = [800,90,700,99,600,56];

var n = Math.floor(Math.random() * randMsg.length);

$('.dynamic-text').text(randMsg[n]);

$({
    numberValue: currentNumber
}).animate({
    numberValue: randNo[n]
}, {
    duration: 2000,
    easing: 'swing',
    step: function () {
        $('#dynamic-number').text(Math.ceil(this.numberValue));
    }
});

借助json数据也可以实现相同的目的。