如何在jQuery中创建百分比计数器？

【问题标题】：How do I create a percentage counter in jQuery?如何在jQuery中创建百分比计数器？
【发布时间】：2017-11-24 04:20:18
【问题描述】：

我试图创建一个百分比计数器，但它没有做我需要的事情。它只显示 100%。但是我需要一步一步地显示所有 0 到 100%！应该怎么改？

setInterval(function per(p = 0) {
  for (p = 1; p <= 100; p++) {
    $(".percentage").text(p + "%");
  }
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="percentage"></p>

【问题讨论】：

标签： jquery html percentage

【解决方案1】：

问题是因为for 循环在几分之一秒内运行，而与 setInterval 无关。

要解决此问题，您可以更改逻辑以使用递归，然后将每次迭代延迟 1 秒，如下所示：

function updatePercentage(p) {
  p = p || 0;
  $(".percentage").text(p + "%");
  if (p < 100) {
    setTimeout(function() {
      updatePercentage(++p);
    }, 1000);
  }
}

updatePercentage();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="percentage"></p>

【讨论】：