有個實現數字滾動的需求，想著肯定有很多這種效果的外掛程式，就不自己造輪子了，於是，找了個numberAnimate js數字滾動外掛程式，還挺好用，很簡單，剛好符合需求。
代碼如下：
<!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> 無分隔字元，無小數點：<p class="numberRun"></p><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判斷就好了，如：
中，第85行的$(this).css("top")一直都是0px，而第84行計算擷取到的thisTop 在數字滾到到0 時值為0px，所以導致直接跳過了判斷，沒有執行到transform動畫那裡，所以少了0的效果，導致看起來的效果就是9直接跳到了11，沒有10。
另外，提示一句，改變數位字型大小大小，需要修改的numberAnimate.css中的height、width、字型大小的比例要把握好，一不小心就壞了，親身體會 -_-||
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
