好用的JS計數器countUp.js套件!!-教學撰寫:徐嘉裕Neil hsu

countUp.js套件是一個非常好用且設定簡單的計數器套件，好朋友可以去他們的Demo網站看一下效果：

http://www.htmleaf.com/Demo/201501271287.html

要使用很簡單，先去下載countUp.js套件回來

https://github.com/inorganik/countUp.js

解壓縮後，吧js裡面的countUp.js放到模組或佈景的JS資料夾裡面，引入即可!!

$xoTheme->addScript(XOOPS_URL.'/modules/模組名稱/js/countUp.js');


然後再要顯示計數器的樣板上貼上以下HTML結構

 <div class="jumbo" id="myTargetElement">0</div>

再於佈景或模組的JS檔中加上以下的設定值即可運作，這些值參之後都能改由AJAX引入數值，成為實際的統計數據。


$(document).ready(function(){
myTargetElement();

function myTargetElement(){

var options = {
useEasing : true,
useGrouping : true, //進位
separator  : ',',
decimal : '.',
prefix : '', //前面留幾個0
suffix : ''  //後面留幾個0
}

//開始值,結束值,小數點,執行速度
var demo = new countUp("myTargetElement", 0, 8888888888, 0, 2.5, options);
demo.start();
}

   });

其中綠字為計數器的開始預設值，紅字為結束值，也就是顯示在計數器上的最終數值，之後這兩個參數可替換為AJAX回傳的資料庫數值即可運作。


最後加上CSS設定

 .jumbo {
margin:0;
color:#EC4365;
font-size:200%;
white-space:nowrap;
}


這樣就完成countUp計數器的初始化設定工作了，有需要的朋友可以參考看看!!


教學撰寫：徐嘉裕 Neil hsu