美文网首页
数字递加效果

数字递加效果

作者: 放下手机出来嗨 | 来源:发表于2019-06-05 16:37 被阅读0次
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="count"></div>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.2/jquery.min.js" ></script>
        <script>
            function countUp(count) {
            'use strict';
                var div_by = 100,
                    speed = Math.round(count / div_by),
                    $display = $('.count'),
                    run_count = 1,
                    int_speed = 24;
                var int = setInterval(function () {
                    if (run_count < div_by) {
                        $display.text(speed * run_count);
                        run_count++;
                    } else if (parseInt($display.text()) < count) {
                        var curr_count = parseInt($display.text()) + 1;
                        $display.text(curr_count);
                    } else {
                        clearInterval(int);
                    }
                }, int_speed);
            }
            countUp(495);
        </script>
    </body>
</html>

相关文章

  • 数字递加效果

  • 如何区分前递加和后递加

    运算符中++i和i++如何区分 在起初学习运算符的时候,我总是区分不了++i和i++后来我想了很久,终于我用自己的...

  • 思恋花

    尚记否这样的日子 红霞满天莺歌燕舞 银汉鹊桥仙梦 数字的变化 温馨的递加 笑中的泪花 泪花中的笑 记忆中风干的痛 ...

  • 爱与囚1

    . 我是陈想楠,长期混迹于文字圈的二流作家,不,可能这个数字还要有所递加。可最近我很红,真可笑,我的走红完全和我刚...

  • 《青春痘和老年斑》22

    发现自己这一周不喜欢写文章,每天到这里报个到,也只是想要看到那个数字的递加22。……写文章是真的需要强烈的愿望的,...

  • 体检

    一年一度的体检又到了,时间太匆匆,上一次体检似乎就是昨天的事儿。 体检表上除了年龄数字在递加,检测项目在增加,B超...

  • 数字滚动效果

    先上图看效果哈: numberAnimate numberAnimate 是一款数据滚动组件,我是站在巨人的肩膀上...

  • 数字滚动效果

    1、https://www.helloweba.com/view-blog-217.html

  • 数字跳动效果

    动画利用requestAnimationFrame实现,有个很好用的npm包:raf目前该组件只支持整数型的数字展...

  • 动态数字效果

    今天和大家分享一个数字滑动的案例,可以让网页的数字滚动起来。 代码展示如下: css: html: script:...

网友评论

      本文标题:数字递加效果

      本文链接:https://www.haomeiwen.com/subject/uzllxctx.html