每次用户刷新页面时不同的JS动画

Different JS animation every time users refresh the page

本文关键字：JS 动画 用户 刷新      更新时间：2023-09-26

我在我的网站上使用一个小动画来增加数字，见http://jsfiddle.net/zQ5AL/我想做的是有2-3个不同的动画(实际上相同的动画，但numberValue和文本将是不同的)，以便每次用户刷新页面，他得到不同的数字(提前设置)和文本(即。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)); 
    }
});

试试这个

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

这里是小提琴: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));
    }
});

你可以自定义它:

  1. 改变maxNo
    2. 产生的最大随机no
  2. 通过更改或添加字符串到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));
    }
});

试一试:

html 

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

.dynamic-number {
    width: 100px;
    height: 40px;
    padding: 20px;
    background: red;
    font: bold 35px Arial;
    color: #fff;
    text-align: center;
}
.dynamic-text {
    font: bold 35px Arial;
    color: blue;
    text-align: left;
}
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)); 
    }
});
}

相关文章：