跑秒效果，从0开始一直加在规定时间内加到最大值

Posted WEB前端--haley

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跑秒效果，从0开始一直加在规定时间内加到最大值相关的知识，希望对你有一定的参考价值。

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    <meta name="Author" content="haley">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <title>跑秒显示效果</title>
    <style>
        .num{
            color:green;
            font-weight: bold;
            border:1px solid #f00;
            height: 80px;
            line-height: 80px;;
            font-size: 50px;
            width: 14%;
            float: left;
            text-align: center;
        }
    </style>
</head>
<body>
<div style="position: fixed;top:100px;width:100%;">
    <div class="num num1">15</div>
    <div class="num num2">34</div>
    <div class="num num3">25</div>
    <div class="num num4">32</div>
</div>
<div style="height:2000px;"></div>
<script>
    var numbers=[460,260,100,245];
    var cons=[
        {"name":$(\'.num1\'),"n":numbers[0]},
        {"name":$(\'.num2\'),"n":numbers[1]},
        {"name":$(\'.num3\'),"n":numbers[2]},
        {"name":$(\'.num4\'),"n":numbers[3]}
    ];
    var timer=null;
    var second=2000;
    function setHtml(){
        $.each(cons,function(i){
            cons[i].name.html(cons[i].n);
        });
    }
    $.fn.extend({
        \'runSecond\': function () {
            var elem = $(this);
            var h = elem.html()/1;
            var a = 0;
            timer = setInterval(function () {
                if (a <= h) {
                    elem.html(a++);
                } else {
//                    clearInterval(timer);
                    timer = null;
                }
            }, second / h);
            console.log(h);
        }
    });
    (function ($) {
        setHtml();
        var a= 1,arr=[];
        arr[0]=$(\'body\').scrollTop();
        $(window).scroll(function(){
            arr[1]=$(\'body\').scrollTop();
            console.log(arr[0]);
            console.log(arr[1]);
            if(arr[0]<arr[1]){
                console.log(\'向下滚动\');
                arr[0]=arr[1];
            }else{
                console.log(\'向上滚动\');
                arr[0]=arr[1];
            }
            if($(\'body\').scrollTop()>100&&a%2){
                a++;
                $.each(cons, function (j) {
                    $(cons[j].name).runSecond();
                });
            }
            if($(\'body\').scrollTop()<20){
                a=1;
            }
        });
    })(jQuery);

</script>
</body>
</html>

 

以上是关于跑秒效果，从0开始一直加在规定时间内加到最大值的主要内容，如果未能解决你的问题，请参考以下文章

C语言 2的一次方加到2的十次方

for循环语句内加数字的逻辑

编程实现求2的零次方加2的一次方一直加到2的十次方的值

基于循环内加减一的计算器思维练习

Day5

浮点值可以加到零和吗？ [复制]