数字计数增长效果

Html

Css

Js

.block2 { width:300px; height:300px; line-height:300px; background:#9A7646; position:absolute; top:50%; left:50%; margin-left:-150px; margin-top:-150px; color:#fff; text-align:center; } .num { }.num b { font-size:40px; font-family:"微软雅黑"; }

var numstr = "88,888,88"; numGrow($('.block2 .num b'), numstr, 20000, 10); //数字增长 function numGrow(obj, str, time, delay) { var num = numstr.replace(/[^0-9]/ig, ""); var g = 0; obj.text(g); var step = Math.ceil(num / (time / delay)); var time = setInterval(function() { if (g <= num - step) { g += step; } else { g = num; } obj.text(formatNum(g.toString())); if (g >= num) { clearInterval(time); return; } }, delay); } //数值处理 function formatNum(str) { var newStr = ""; var count = 0; for (var i = str.length - 1; i >= 0; i--) { if (count % 3 == 0 && count != 0) { newStr = str.charAt(i) + "," + newStr; } else { newStr = str.charAt(i) + newStr; } count++; } return newStr; }

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.7.2

1、通过setInterval()方法实现动效

var time = setInterval(function() {
    if () {} else {
        clearInterval(time); //清除计时器return;
    }
}, delay);

2、计数增长事实上是数字替换，由计时器提供新数字。

3、数值字符串化，并在特定位置加入逗号。str.charAt()方法 读取字符串特定位置的值；str.replace()方法 替换特定字符串的值 书写格式为正则表达式 针对数字而言，去掉字符串里的逗号str.replace(/[^0-9]/ig,"")；