Question

我正在尝试为网站获得各种进度条，这些进度条以相同的速度但长度不同而加载。我已经尝试过此代码，但无法正常工作

var prog = document.getElementsByClassName("prog");
var c = 0;
var ski = [50, 40, 35, 25, 32, 33, 20, 25];
var j;
var t = 0;

function inc() {
  if (t == ski[c]) {
    clearTimeout(ty);
    t = 0;

  } else {
    t++;
    prog[c].style.width = t + "%";
  }
}

function ani() {
  for (j = 0; j < ski.length; j++) {
    var ty = setTimeout(inc, 30);
    c = j;
  }
}

ani();

ski数组是动画完成后将div加载的百分比长度，将50％的宽度视为进度条的全长。 prog是高度较小且宽度较长的div数组。

请帮助。

Answer 1

您似乎正在将每个项目的宽度设置为t，这是您的情况下的索引。您可以尝试将其设置为ski[t]。

基本上，您将每个设置为1%，然后设置为2%，依此类推。

Answer 2

您似乎使该问题过于复杂。您可以简单地遍历.prog数组中的每个prog元素，然后设置它们的宽度。如果要使更改生动起来，请在这些元素的CSS中设置transition: width，如下所示：

window.addEventListener('load', function() {
  var prog = document.getElementsByClassName("prog");
  var ski = [50, 40, 35, 25, 32, 33, 20, 25];

  function ani() {
    for (i = 0; i < prog.length; i++) {
      prog[i].style.width = (ski[i] * 2) + '%';
    }
  }

  ani();
});

.prog {
  width: 0;
  height: 25px;
  background-color: #C00;
  margin: 0 0 5px;
  transition: width 0.5s;
}

<div class="prog"></div>
<div class="prog"></div>
<div class="prog"></div>
<div class="prog"></div>
<div class="prog"></div>
<div class="prog"></div>
<div class="prog"></div>
<div class="prog"></div>

如何使用js赋予其他各种div不同的宽度

2 个答案: