Question

我正在使用此代码显示进度条中的当前进度：

var rotatingTextElement;
var rotatingText = new Array();
var ctr = 0;

function initRotateText() {
rotatingTextElement = document.getElementById("percent");
rotatingText[0] = rotatingTextElement.innerHTML;
rotatingText[1] = "5%";
rotatingText[2] = "10%";
rotatingText[3] = "15%";
rotatingText[4] = "20%";
rotatingText[5] = "25%";
rotatingText[6] = "30%";
rotatingText[7] = "35%";
rotatingText[8] = "40%";
rotatingText[9] = "45%";
rotatingText[10] = "50%";
rotatingText[11] = "55%";
rotatingText[12] = "60%";
rotatingText[13] = "65%";
rotatingText[14] = "70%";
rotatingText[15] = "75%";
rotatingText[16] = "80%";
rotatingText[17] = "85%";
rotatingText[18] = "90%";
rotatingText[19] = "95%";
rotatingText[20] = "100%";
setInterval(rotateText, 500);
}
function rotateText() {
ctr++;
if(ctr >= rotatingText.length) {
ctr = 0;
}
rotatingTextElement.innerHTML = rotatingText[ctr];
}
window.onload = initRotateText;

它基本上每隔500毫秒就会以跨度＃百分比来换算一个新的百分比。
问题是，在进度条达到100％后，它再次以0％，5％等开始。依据如何检查数组rotateText到[20]中的百分比是否全部显示，然后停止旋转？

Answer 1

请改为：

var rotatingTextElement = document.getElementById("percent");
var ctr = 0;

function rotateText() {
  rotatingTextElement.innerHTML = ctr + "%";
  ctr += 5;
  if (ctr <= 100) {
    window.setTimeout(rotateText, 500);
  }
}

rotateText();

Answer 2

有几种方法可以整理它。要回答您的问题，首先将时间间隔分配给变量：

var rotator = null;
...
rotator = setInterval(rotateText, 500);

...

function rotateText() {
  ctr++;
  if(ctr >= rotatingText.length -1) {
    clearInterval(rotator);
  }
  rotatingTextElement.innerHTML = rotatingText[ctr];
}
...

然后，当它超出边界时，不要将迭代器重置为0，清除间隔，使其停止更改值。您需要添加-1以使其在rotatingText[length-1]（最后一个元素）

上停止

2 个答案: