网页数字自增效果
jianfly.com 2019-01-31 2502次浏览
html
<div class="index-bar"> <div class="container clearfix"> <div class="left box"> <div class="big"> <span>2017</span><span> 年</span> </div> <div class="sml"> 昆山威兹德姆工控公司<br/> 常州分公司成立 </div> </div> <div class="left line"></div> <div class="left box"> <div class="big"> <span>50</span><span> +</span> </div> <div class="sml"> 公司拥有一支年轻化、专<br/> 业化的高素质人才队伍 </div> </div> <div class="left line"></div> <div class="left box"> <div class="big"> <span>100</span><span> +</span> </div> <div class="sml"> 目前商业共赢伙伴 </div> </div> <div class="left line"></div> <div class="left box"> <div class="big"> <span>100</span><span> +</span> </div> <div class="sml"> 成功合作案例 </div> </div> </div> </div>
js
<script> $(function(){ $(".index-bar .box span:first-child").each(function(){ var _this = this; var num = parseInt($(this).text()); var a = 0; setInterval(function(){ if(a < num ) { a += parseInt(num/50); if(a > num) { $(_this).html(num); }else { $(_this).html(a); } } } , 50); }) }) </script>