Javascript 每次用户刷新页面时都会出现不同的JS动画

我正在我的网站上使用一个小动画来增加数字，请参见 我想做的是有2-3个不同的动画（实际上是相同的动画，但数字值和文本会不同），这样每次用户刷新页面时，他都会得到不同的数字（预先设置）和文本（即900是鸟的数量，1300是猫的数量，80是狗的数量，等等）。我该怎么做

非常感谢,

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

试试看：

html

javascript

DoAnimation(700,'#dynamic-number');
DoAnimation(500,'#dynamic-number2');
function DoAnimation(nv,id) {
var currentNumber = $(id).text();
$({numberValue: currentNumber}).animate({numberValue: nv}, {
    duration: 2000,
    easing: 'swing',
    step: function() { 
        $(id).text(Math.ceil(this.numberValue)); 
    }
});
}

试试这个

function changeNumber(txtc,num){
$('#'+txtc).text('1');
var currentNumber = $('#dynamic-number').text();
var x = Math.floor((Math.random() * num) + 1);
$({numberValue: currentNumber}).animate({numberValue: x}, {
    duration: 2000,
    easing: 'swing',
    step: function() { 
        $('#'+txtc).text(Math.ceil(this.numberValue)); 
    }
});

}

changeNumber('dynamic-number1',900);
changeNumber('dynamic-number2',1300);
changeNumber('dynamic-number3',80);

这是小提琴：

来自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

数组添加字符串来更改消息或添加消息

---

更新

如果您的号码是预定义的：

---

在json数据的帮助下也可以实现同样的效果。

谢谢您的回答。但在您的示例中，两者同时显示，我希望每次显示一个不同的（但不确定这是否可行）。谢谢谢谢你的回答。但这并不是我真正想要的，我现在修改了我的帖子，让它更清晰。谢谢你，非常感谢！我怎样才能预先定义“鸟的数量”、“飞行的飞机”、“看到的外星人”、“收到的问候”、“发送的信息”、“你的个人信息”的数字？（我相信这些数字暂时是随机设置的）谢谢！所以鸟/狗/猫的数量是预先确定的还是随机的？是的，非常感谢你的帮助，非常感谢

DoAnimation(700,'#dynamic-number');
DoAnimation(500,'#dynamic-number2');
function DoAnimation(nv,id) {
var currentNumber = $(id).text();
$({numberValue: currentNumber}).animate({numberValue: nv}, {
    duration: 2000,
    easing: 'swing',
    step: function() { 
        $(id).text(Math.ceil(this.numberValue)); 
    }
});
}

function changeNumber(txtc,num){
$('#'+txtc).text('1');
var currentNumber = $('#dynamic-number').text();
var x = Math.floor((Math.random() * num) + 1);
$({numberValue: currentNumber}).animate({numberValue: x}, {
    duration: 2000,
    easing: 'swing',
    step: function() { 
        $('#'+txtc).text(Math.ceil(this.numberValue)); 
    }
});

}

changeNumber('dynamic-number1',900);
changeNumber('dynamic-number2',1300);
changeNumber('dynamic-number3',80);

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

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