Question

我想要做的就是这个

<span>0%</span>

我希望jQuery从0％开始计数到给定值。我有3个跨度，每个都是0％但是当我点击时，让我们说一个按钮，它们以一定速度自动从0％，1％，2％，3％直到它达到给定值，例如... 99％。这可能吗？谢谢。！

我没有使用图片作为数字，只使用文字。

Answer 1

这些方面的东西（在这里测试：http://jsfiddle.net/KP2BL/）：

<span id="span1">0%</span>
<input id="btn" type="button" value="Click Me"></input>

<script>
    jQuery("#btn").click(function() 
    {
        var value = parseInt(jQuery("#span1").text())
        jQuery("#span1").text(value + 1 + "%")
    })
</script>

Answer 2

编辑：好的，单击一下按钮就可以启动三个跨度的自动更新，每个跨度都有不同的总数：

<span id="percentSpan1">0%</span>
<span id="percentSpan2">0%</span>
<span id="percentSpan3">0%</span>
<input id="startButton" type="button" value="Start">

<script>
$("#startButton").click(function() {
   var spans = {"percentSpan1" : 99,
                "percentSpan2" : 40,
                "percentSpan3" : 20},
       speed = 3000; // ms

   for (var k in spans) {
      (function(spanId) {
         var currentPercent = 0,
             intervalID = setInterval(function() {
                 $("#" + spanId).text(++currentPercent + "%");
                 if (currentPercent === spans[spanId])
                     clearInterval(intervalID);
             }, Math.floor(speed / spans[spanId]));
      })(k);
   }
});

</script>

~~你不清楚你说的三个跨度是否应该链接到一个按钮，或者它们是否应该达到相同的最大百分比值，所以我会离开那部分给你。~~

jQuery文本操作计数器

2 个答案: