时间戳

首页 > 解决方案 > 如何使用javascript逐渐将列表中的每个项目设置为innerHTML/textContent？

javascript - 如何使用javascript逐渐将列表中的每个项目设置为innerHTML/textContent？

问题描述

我想使用javascript在我的HTML页面上每秒将列表中的所有项目显示为innerHTML。这是我的代码：

--------------------HTML--------------------

<text id="firstWoman" class="text" x="380" y="110" fill="red" font-size="56">Mary</text>

--------------------JS--------------------

let W1 = document.getElementById("firstWoman");
let W1_list = ["Mary", "Anne", "Jessica"];

let W1_timeline = setInterval(function(){
    for(let w of W1_list){
        W1.textContent = w;
    }
    if (let w in W1_list> w.length ){
        clearInterval(W1_timeline);
        }
}, 1000);

类似的方式也不起作用：

let W1 = document.getElementById("firstWoman");
let W1_list = ["Mary", "Anne", "Jessica"];
let w = W1_list[0];

let W1_timeline = setInterval(function(){
        W1.textContent = w++;

    if (let w in W1_list> w.length ){
        clearInterval(W1_timeline);
        }
}, 1000);

这适用于数字，但显然不适用于字符串。你知道出了什么问题吗？

标签： javascriptjquery-animatesetinterval

解决方案

您的代码中有一些错误。

for(let w of W1_list){
    W1.textContent = w;
}

在这里，您正在匆忙遍历完整的 W1_list 数组。

您需要使用全局计数器来确定要显示的数组中的哪些元素。然后，您可以通过以下方式将其分配给文本元素：

W1.textContent = W1_list[counter];

如果到达数组的末尾，要清除计时器，您需要增加计数器并将其与数组的长度进行比较。

  if (counter == W1_list.length) {
    clearInterval(W1_timeline);
  }

这是完整的示例：

let W1 = document.getElementById("firstWoman");
let W1_list = ["Mary", "Anne", "Jessica"];
let counter = 0;
let W1_timeline = setInterval(function() {
  W1.textContent = W1_list[counter];
  counter++;
  if (counter == W1_list.length) {
    clearInterval(W1_timeline);
  }
}, 1000);
<text id="firstWoman" class="text" x="380" y="110" fill="red" font-size="56">Mary</text>

推荐阅读