通过JQuery显示

2024-05-19 • 问答

我想每秒显示一个数字，直到达到总数为止。这是10个数字的工作代码。如您所见，我分别从1到10键入了每个数字。现在，如果我要为5,000个数字输入该怎么办？当然，必须有一种更简单的方法将序列号列表放入“数字”变量中。

(function() {
  var timesRun = 0;
  var numbers = ['1','2','3','4','5','6','7','8','9','10'],i = 0;

  setInterval(function() {
    timesRun += 1;
    if (timesRun < 10) {
      $('#changing-number').fadeOut(function() {
        $(this).html(numbers[i = (i + 1) % numbers.length]).fadeIn();
      });
    }
  },1000);

})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="changing-number">0</span> out of 10 have been completed

只需显示timesRun，因为它是一个序列号。

当达到极限时，您还应该清除间隔。

您还应该在限制后检查计数器来增加计数器，否则不会显示最后一个值。

(function() {
  var timesRun = 0;
  var runLimit = 10;
  var interval = setInterval(function() {
    if (timesRun < runLimit) {
      timesRun += 1;
      $('#changing-number').fadeOut(function() {
        $(this).html(timesRun).fadeIn();
      });
    } else {
      clearInterval(interval);
    }
  },1000);

})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="changing-number">0</span> out of 10 have been completed

如果您想输入更多数字，请更改runLimit。

通过JQuery显示

ccc_crazy_2000 回答：通过JQuery显示

大家都在问