网页数字自增效果

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>