Javascript 加上“或”；吐温；在两个值之间（但不设置动画）

我有一个变量，从0增加到99

然后我有一个div，我想以相同的递增变量的速率移动，但我只想定义移动的两端（例如，从上到下移动，我只定义最上面的位置和最下面的位置）。当主变量将其值从0更改为99时，其余变量应自动插值

我得到的所有搜索结果都与动画有关。但这并不完全是动画，因为如果变量没有改变，div就不应该移动。如何在javascript中做到最好

编辑：一些模型代码（可能有语法错误）：

var计数器=0；
var-topValue=50；
风险价值=150；
var插值
$（“#增加”）。单击（）{
计数器++；
}
$（'#move'）.css（）{
top:interpolatedValue；//这应该是基于当前计数器值的50到150之间的插值
}

类似于：

// b - beginning position
// e - ending position
// i - your current value (0-99)
function getTween(b, e, i) {
    return b + ((i/99) * (e-b));
}

---

如果您的递增值将不同于0-99，则需要将函数中硬编码的

99

更改为其他值，或传入最大值。

例如，如果顶部和底部分别为400和600，您可以通过一些简单的数学计算基于变量的位置

var theVariable = 25; // 1 to 100
var top = 400;
var bottom = 600;
var distance = bottom - top;
var position = top + ((theVariable / 100) * distance); // 450

---

我可能会这样做，这样您就可以一次“动画化”多个对象，而不必在脚本内部做太多更改：

HTML:

jQuery：

var p = 0;
function start(){
    $('.mover').each(function(){
        var $t = $(this);
       $t.css($t.data('prop'),$t.data('start')+($t.data('end')-$t.data('start'))/100*p);
    });
    if(p<100){
        p++;
        setTimeout(start,Math.round(Math.random()*500));
    }
}
start();

var p=0；
函数start（）{
$（'.mover'）。每个（函数（）{
var$t=$（本）；
$t.css（$t.data（'prop'），$t.data（'start'）+（$t.data（'end'）-$t.data（'start'））/100*p）；
});
如果（p）请提供一些不符合您要求的代码。从您的描述中很难理解您试图实现的目标。这是为了进度指标吗？您可能想在增加值的地方设置特定的样式值。当您使用“速率”一词时对于正在更改的变量，它使其听起来像动画，但根据您所说的其他内容，它听起来像是基于值或变量的位置非常旧。对吗？您说值从0增加到99。然后您说这不是动画，因为值没有更改。这是相互排斥的。@Jon Hanna说它不是动画的意思是它不是基于时间的。意思是我不能说“移动2秒”或者类似的东西。因为当变量不改变时，div也不会移动。太好了，这看起来像我需要的！只有setTimeout让我有点困惑，那部分做什么？抱歉，我测试了这个，div的移动没有连接到var p值。除非p改变，否则任何东西都不应该移动。@Sonypackman这就是为什么我在setTimeout循环中增加了p进行演示。您可能只需要$（'.mover'）。each（）部分。这就是根据p更新值的地方。是的，我想您得到了。这比我想象的要简单！
var MyVar = 0, Max = 99;
setInterval(increaseMyVar,30)//Call increaseMyVar every 30ms

function increaseMyVar()//MyVar Will go from 0 - 99
{
    MyVar = ++MyVar % Max;
}

//Do whatever you want with MyVar

<div class="mover" data-start="0" data-end="400" data-prop="margin-left"></div>

var p = 0;
function start(){
    $('.mover').each(function(){
        var $t = $(this);
       $t.css($t.data('prop'),$t.data('start')+($t.data('end')-$t.data('start'))/100*p);
    });
    if(p<100){
        p++;
        setTimeout(start,Math.round(Math.random()*500));
    }
}
start();