如何在Javascript中显示运行计数器？

发布于 2024-08-22 05:31:54 字数 474 浏览 5 评论 0原文

我有一个包含数值的表格单元格。

更改值时，我想创建一种效果，其中计数器向上（或向下）移动 100 步，直到达到新值。

我尝试过类似以下的方法（在 jQuery 的帮助下）： <代码> <代码>

function update(element,newValue)
{
  var oldValue = parseFloat($(element).text());
  var diff = (newValue - oldValue) / 100;
  for (var i = 0; i < 100; i++) {
    oldValue += diff;
    $(element).text(oldValue);
  }
}

> 然而，Javascript 似乎不会刷新显示，直到脚本完成后 - 因此没有效果。

如何确保每一步都显示中间值？

原文

I have a table cell that contains a numerical value.

When changing the value, I want to create an effect where the counter moves up (or down) in 100 steps until reaching the new value.

I've tried something like the following (with the help of jQuery):

function update(element,newValue)
{
  var oldValue = parseFloat($(element).text());
  var diff = (newValue - oldValue) / 100;
  for (var i = 0; i < 100; i++) {
    oldValue += diff;
    $(element).text(oldValue);
  }
}

However, Javascript doesn't seem to refresh the display until AFTER the script is done - thus there's no effect.

How do I make sure the intermediate values are displayed at each step?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

维持三分热 2024-08-29 05:31:54

像这样的东西非常面向 jQuery：

jQuery.fn.extend({
  animateCount : function (from, to, time) {
    var steps = 1,
        self = this,
        counter;

    if (from - to > 0) {
      steps = -1;
    };

    from -= steps;

    function step() {
      self.text(from += steps);

      if ((steps < 0 && to >= from) || (steps > 0 && from >= to)) {
        clearInterval(counter);
      };
    };

    counter = setInterval(step, time || 100);
  }
});

现在只需使用：

$('#selector').animateCount(1,100);

它将计数到 1 到 100，数字每 100 毫秒递增一次。间隔是可选的第三个参数。

Something like this is very jQuery orientated:

jQuery.fn.extend({
  animateCount : function (from, to, time) {
    var steps = 1,
        self = this,
        counter;

    if (from - to > 0) {
      steps = -1;
    };

    from -= steps;

    function step() {
      self.text(from += steps);

      if ((steps < 0 && to >= from) || (steps > 0 && from >= to)) {
        clearInterval(counter);
      };
    };

    counter = setInterval(step, time || 100);
  }
});

Now just use:

$('#selector').animateCount(1,100);

Which will count to 1 to 100, with the number incrementing every 100 ms. The interval is an optional 3rd parameter.

回复收藏 0 原文

半世晨晓 2024-08-29 05:31:54

JavaScript 和 DOM 共享同一个线程，因此当脚本当前正在执行时，显示无法刷新。它必须等到线程空闲。您只能使用 setTimeout 或 < a href="https://developer.mozilla.org/en/DOM/window.setInterval" rel="nofollow noreferrer">setInterval 调用，用计时器而不是循环增加每个步骤。

回复收藏 0 原文

你的呼吸 2024-08-29 05:31:54

不确定 JQuery 方面的情况，但这里有一个快速示例页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
    <head>
        <title>test</title>
        <script type="text/javascript">
            var t, max, i;

            function Increase(amount) {
                max = amount;
                i = parseInt(document.getElementById("count").value);
                t = setInterval("SetIncrease()", 10);
            }

            function SetIncrease() {
                document.getElementById("count").value = ++i;
                if(i == max) {
                    clearTimeout(t);
                }
            }
        </script>
    </head>
    <body>
        <input id="count" type="text" value="1"/>
        <input type="button" value="Up" onclick="Increase(100)"/>
    </body>
</html>

Not sure about the JQuery side of things, but here's a quick sample page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
    <head>
        <title>test</title>
        <script type="text/javascript">
            var t, max, i;

            function Increase(amount) {
                max = amount;
                i = parseInt(document.getElementById("count").value);
                t = setInterval("SetIncrease()", 10);
            }

            function SetIncrease() {
                document.getElementById("count").value = ++i;
                if(i == max) {
                    clearTimeout(t);
                }
            }
        </script>
    </head>
    <body>
        <input id="count" type="text" value="1"/>
        <input type="button" value="Up" onclick="Increase(100)"/>
    </body>
</html>

回复收藏 0 原文

~没有更多了~