Question

我有一个从0到指定数字的计数器 - 我认为这是完美的。随着数字递增，div高度的背景颜色也应该向上移动到计数器的百分比。

因此，50％计数器应该为绿色背景设置50％的div高度 - 同时同步和同步速度，同时停止和启动。

我这里有我的小提琴代码 - 但我知道它不能很好地工作，代码有点分开。 http://jsfiddle.net/QGNKt/3/

有人可以指导我清理一下吗？我在写作轨道上吗？帮助修改JSFiddle代码将有所帮助。我知道我可以使用我没有的代码 - 但代码似乎是分开的 - 可能我现在要做的事情 - lol

<head>
    <style type='text/css'>
        #container {
            position: relative;
            overflow: hidden;
            height: 50px;
            width: 50px;
        }

        #green {
            height: 500px;
            width: 50px;
            background: #090;
            position: absolute;
            top: 50px;
            left: 0;
        }
    </style>

    <script type='text/javascript'>//<![CDATA[ 
        $(window).load(function () {
            function createCounter(elementId, start, end, totalTime, callback) {
                var jTarget = jQuery("#" + elementId);
                var interval = totalTime / (end - start);
                var intervalId;
                var current = start;
                var f = function () {
                    jTarget.text(current);
                    if (current == end) {
                        clearInterval(intervalId);
                        if (callback) {
                            callback();
                        }
                    }
                    ++current;
                }
                intervalId = setInterval(f, interval);
                f();
            }
            jQuery(document).ready(function () {
                createCounter("counterTarget", 0, 50, 2000, function () {
                    //alert("finished")
                })
            })
            //]]>

            $(document).ready(function () {

                $('#green').animate({
                    top: 30
                }, 2300, function () {
                    //$('#button').val('down');
                });
            });
        });//]]>  

    </script>
</head>
<body>
    <h1 style="font-size: 135px" id="counterTarget"></h1>
    <h1 class="f-l">%</h1>

    <div id="container" style="border: Red solid 1px;">
        <div id="green"></div>
    </div>
</body>

Answer 1

我整理了你的代码并整理了一下。您是否尝试过使用预制解决方案进行进度条等？看看Twitter Bootstrap。

小提琴：http://jsfiddle.net/BenedictLewis/QGNKt/6/

与背景颜色Animate的Jquery计数器

1 个答案: