jQuery文本处理计数器

jQuery Text Manipulation Counter

本文关键字：计数器 处理 文本 jQuery      更新时间：2023-09-26

我要做的是

<span>0%</span>

我想要jQuery开始计数从0%到给定的值。我有3个跨度，每个都是0%，但当我点击一个按钮时，它们会以一定的速度从0%、1%、2%、3%自动移动，直到达到给定的值，例如……99%。这可能吗?谢谢。!

我不使用图像作为数字，只有文本。

编辑:好的，一个单一的按钮点击应该会启动三个跨度的自动更新，每个跨度的总数不同:

<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>

你没有说清楚你所说的三个span是应该链接到一个按钮，还是应该有相同的最大百分比值，所以我把这部分留给你。

以下内容(在这里测试: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>
相关文章：