或许你还记得google邮箱不停增加的MB数量吧。
下面的代码可以实现类似功能,实现很简单(或许应该去掉abs重写一下,只有增长没有减少的数值感觉有点假了。)
代码结构如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Number</title>
</head>
<body>
<h3>Site Stats</h3>
<ul class="s-stats">
<li>
<div class="name">Members Logged in:</div>
<div class="value"><span id="dispnum2">8,395,455</span></div>
</li>
<li class="line">
<div class="name">Files Shared:</div>
<div class="value"><span id="dispnum3">53,452,962</span></div>
</li>
<li>
<div class="name">Average DL Speed:</div>
<div class="value"><span id="dispnum1">3,942</span> KB/sec</div>
</li>
<li class="line">
<div class="name">Movies Online:</div>
<div class="value"><span id="dispnum">3,567,066</span></div>
</li>
<li>
<div class="name">TV Shows Online:</div>
<div class="value"><span id="dispnum4">11,498,445</span></div>
</li>
<li class="line">
<div class="name">Music Online:</div>
<div class="value"><span id="dispnum5">34,346,786</span></div>
</li>
<li class="total">
<div class="name">Software Online:</div>
<div class="value"><span id="dispnum6">8,344,618</span></div>
</li>
</ul>
</body>
</html>
JS脚本如下:
function formatNumber(number, decimals, dec_point, thousands_sep ) {
var n = number, c = isNaN(decimals = Math.abs(decimals)) ? 2 : decimals;
var d = dec_point == undefined ? "," : dec_point;
var t = thousands_sep == undefined ? "." : thousands_sep, s = n < 0 ? "-" : "";
var i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
}
var ttnum=3567066;var tt;function dis_num() { document.getElementById ("dispnum").innerHTML=formatNumber(ttnum, 0, '.', ','); ttnum = ttnum+2; tt = setTimeout ("dis_num()",800); } dis_num();
var ggnum=3942;var gg;function dis_num1() { document.getElementById ("dispnum1").innerHTML=formatNumber(ggnum, 0, '.', ','); ggnum = ggnum+2; gg = setTimeout ("dis_num1()",1100); } dis_num1();
var hhnum=8395455;var hh;function dis_num2() { document.getElementById ("dispnum2").innerHTML=formatNumber(hhnum, 0, '.', ','); hhnum = hhnum+1; hh = setTimeout ("dis_num2()",2200); } dis_num2();
var iinum=53452962;var ii;function dis_num3() { document.getElementById ("dispnum3").innerHTML=formatNumber(iinum, 0, '.', ','); iinum = iinum+8; ii = setTimeout ("dis_num3()",1000); } dis_num3();
var jjnum=11498445;var hh;function dis_num4() { document.getElementById ("dispnum4").innerHTML=formatNumber(jjnum, 0, '.', ','); jjnum = jjnum+5; jj = setTimeout ("dis_num4()",7000); } dis_num4();
var kknum=34346786;var kk;function dis_num5() { document.getElementById ("dispnum5").innerHTML=formatNumber(kknum, 0, '.', ','); kknum = kknum+1; kk = setTimeout ("dis_num5()",1600); } dis_num5();
var llnum=8344618;var ll;function dis_num6() { document.getElementById ("dispnum6").innerHTML=formatNumber(llnum, 0, '.', ','); llnum = llnum+1; ll = setTimeout ("dis_num6()",800); } dis_num6();