Question

我写动画看起来数字在有限的时间内上升。使用setInternal和clearInterval来实现它。（我不想使用Jquery）间隔时间为1毫秒。限制时间为1000毫秒。但它比预期慢。它差不多10000毫秒。我做错了什么？

这是我的代码。

<html>
<head>
    <title>A numeric test</title>
</head>


<body>
    <div id="numberScroll"></div>

    <script type="text/javascript">
    var limitTime = 100; //milliSeconds
    var goalNum = 123456;   //the final num
    var increament = false; //whether the animation is increasing of not.
    var textSize = 30;      //size of text
    var temNum = increament ? (goalNum * 0.8) : (goalNum * 1.2);    //start number
    temNum = eval(temNum.toFixed(2));
    var increamentNum = (goalNum - temNum) / limitTime;
    var numberScroll = document.getElementById("numberScroll");
    if(numberScroll === null) {
        console.log("No Element Found");
    }
        numberScroll.style.fontSize = textSize;
        numberScroll.innerHTML = temNum;

    var intervalId = setInterval(function(){
        numberScroll.innerHTML = temNum.toFixed(2);
        temNum += increamentNum;
        if(increament){
            if(temNum >= goalNum) {
                clearInterval(intervalId);
                numberScroll.innerHTML = goalNum;
            }
        } else {
            if(temNum <= goalNum) {
                clearInterval(intervalId);
                numberScroll.innerHTML = goalNum;
            }
        }},1);
    </script>
</body>

</html>

如何根据setInterval（js）使动画持续时间更准确

0 个答案: