數字滾動插件numberAnimate.js的使用及效果修改

時間 2019-11-09

標籤數字滾動插件 numberanimate.js numberanimate 使用效果修改欄目 JavaScript 简体版

原文原文鏈接

有個實現數字滾動的需求，想着確定有不少這種效果的插件，就不本身造輪子了，因而，找了個numberAnimate js數字滾動插件，還挺好用，很簡單，恰好符合需求。javascript

代碼以下：css

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>數字滾動插件</title>
        <link rel="stylesheet" type="text/css" href="../dist/style/numberAnimate.css" />
    </head>
    <body>
    無分隔符，無小數點：<div class="numberRun"></div><br><br>
    </body>
    <script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="../dist/script/numberAnimate.js"></script>
    <script type="text/javascript">
    $(function(){
        //初始化
        var numRun = $(".numberRun").numberAnimate({num:'1553093', speed:1000});
        //想要的是過一段時間加1的效果，能夠實現
        var nums = 1553093;
        setInterval(function(){
            nums+= 1;
            numRun.resetData(nums);
        },2000);

    })
</script>
</html>

想要的效果是過一段時間加1的效果，能夠實現，可是有個小小的bug，那就是，好比說，個位數字加到9時進一位而後該位上爲0，問題來了，這裏0的數字卻滾動不出來，直接到了下一個時間間隔時滾動到了11，調試了好久發現，是numberAnimate.js中，第85行的判斷條件有問題，註釋掉該if判斷就行了，以下圖：
html