Question

我有这样的HTML：

<input id="numberIncrement" type="text" value="2500"/>
<input id="degreeIncrement" type="text" value="0"/>

我需要在2秒内显示0到2500倒计时，基于此，我需要填充圆度也为0到360

http://jsfiddle.net/ovm6qkvq/2/

所以当倒数开始时0我的学位将是0

当它达到2500时我的学位应该是360。

应该完成 AT 2 seocnd，不是IN 2秒

Answer 1

使用jquery，您将无法在2000毫秒内迭代2500次。每次迭代不到1毫秒！取决于太多的东西。

关于插值，只需添加以下行：

 var degreeIncrease = 360/finalNumber;

 // inside loop
 degreeN0 += degreeIncrease;

看看这个jsfiddle：http://jsfiddle.net/ovm6qkvq/3/ 如您所见，即使您将计时器设置为1毫秒，也无法获得所需的效果。

Answer 2

function count(finalNumber,time){

    var intervalTime = time / finalNumber
    var x = 0
    var degreeN0 = 0 ;

    var increaseNumber = setInterval(function() {

       x++
       $("#Text1").val(x);
       degreeNO = (x / finalNumber) * 360;
       $("#degree").val( degreeNO.toFixed(2) );

       if (x == finalNumber) clearInterval(increaseNumber)


   }, intervalTime);


}

count(50,2000)

这就是你的功能看起来如何。当我用2500测试它需要20秒。如果您要以这种方式显示，我建议您将x增加一个更大的数字。

如何根据计时器增量更新圆度

2 个答案: