javascript - 单个元素的打字效果

Question

我想创建打字效果，但仅针对单个元素，例如 <p> ，不是针对整个页面主体，这个代码片段工作完美，但是它为整个页面创建了效果，我不知道Javascript .

var str = document.body.innerHTML.toString();
var i = 0;
document.body.innerHTML = "";

setTimeout(function() {
    var se = setInterval(function() {
        i++;
        document.body.innerHTML = str.slice(0, i) + "|";
        if (i == str.length) {
            clearInterval(se);
            document.body.innerHTML = str;
        }
    }, 10);
});

感谢您提供的任何帮助。

Answer 1

您几乎完成了所有工作，您错过的是您必须选择要修改的元素:

1. 创建 <p> (或任何其他标签，没有限制)
2. 添加 id到标签
3. 在你的js中选择带有 document.getElementById() 的标签
4. 替换 document.body 的每个实例从您的代码片段到所选元素

我删除了setTimeout因为它没有提供任何信息，如果您的情况需要，请随时将其添加回来我更换了var由 let 提供s 因为变量有时会在较大的脚本上给出意想不到的结果

const element = document.getElementById("typed")

let str = element.innerHTML;
let i = 0;
element.innerHTML = "";


let se = setInterval(function() {
    i++;
    element.innerHTML = str.slice(0, i) + "|";
    if (i == str.length) {
        clearInterval(se);
        element.innerHTML = str;
    }
}, 100); 
// I slowed the interval to make it more visible it only type the center element

text shown everytime
<p id="typed">
this text will be typed
</p>
this text shown everytime too

---

如果需要，第二个片段允许您在同一页面中包含多种类型的消息

const elements = document.getElementsByClassName("typed")

Array.from(elements).forEach(el => {
  let str = el.innerHTML;
  let i = 0;
  el.innerHTML = "";
  
  let se = setInterval(function() {
      i++;
      el.innerHTML = str.slice(0, i) + "|";
      if (i == str.length) {
          clearInterval(se);
          el.innerHTML = str;
      }
  }, 100);
})

text shown everytime
<p class="typed">
this text will be typed
</p>
this text shown everytime too
<p class="typed">
this text will be typed too
</p>