有時候網頁為了強調表格裡數據，希望能做點動態效果，比如「不斷的累加」數值跳動的效果
於是就試著做了這個簡單的應用：累加計數器 <-點此看範例效果
<style>
.box{
float:left;
border:1px dashed #CCCCCC;
width:inherit;
line-height:200%;
margin:2%;
padding:0 2%;
text-align:center;
font-size:30pt;
}
</style>
</head>
<body>
<div class="box counts_1">
<div class="counts_value"></div>
</div>
<div class="box counts_2">
<div class="counts_value"></div>
</div>
<div class="box counts_3">
<div class="counts_value"></div>
</div>
</body>
<script>
<!--/*計數器*/-->
function Counts_Run(set_div, end_num, star_num, speed, add_value, floa){
var score_now = star_num; //起始值
$("div.counts_"+set_div+" div.counts_value").html(score_now.toFixed(floa));
function score_now_up(){
if( $("div.counts_"+set_div+" div.counts_value").html()>=end_num){ //當分數跑到應有的分數時
clearInterval(timer);//計數器停止
}else{
score_now = score_now + add_value;
if(score_now >= end_num){
score_now = end_num;
}
$("div.counts_"+set_div+" div.counts_value").html(score_now.toFixed(floa));
}
}
var timer = setInterval(score_now_up, speed); //開跑
};
//要跑的計數器
Counts_Run(1,101,0,10,0.2,1);//計數器組別, 最終數值, 起始值, 速度, 增加值, 小數位數
Counts_Run(2,800,20,10,1,0);
Counts_Run(3,444.44,440,200,0.06,2);
</script>
備註：需要載入jQuery引擎：https://blog.jquery.com/
