Question

我正在使用https://www.w3schools.com/howto/howto_js_typewriter.asp上显示的打字效果。但是，我想通过使“效果！”一词来对其进行一些更改。文字为蓝色。

问题是，我不知道如何选择未包装在html元素（如span / div）中的文本。我认为javascript / css不能选择单个字符，因此我尝试在if语句中注入标签，但浏览器似乎会自动关闭任何打开的span标签。不知道从这里去哪里。

W3的原始代码

<p id="demo"></p>

var i = 0;
var txt = 'Lorem ipsum typing effect!'; /* The text */
var speed = 50; /* The speed/duration of the effect in milliseconds */

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

我的代码

var i = 0;
var txt = 'Lorem ipsum typing effect!'; /* The text */
var speed = 50; /* The speed/duration of the effect in milliseconds */

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  if (i == 20) {
    document.getElementById("demo").innerHTML += '<span>';
  if (i == 26) {
    document.getElementById("demo").innerHTML += '</span>';
}

我希望获得“ Lorem ipsum输入效果”！具有“效果！”包裹在一个跨度中，以便我可以将文本更改为蓝色。即"Lorem ipsum typing <span style='color:blue;'>effect!</span>"

Answer 1

在将txt变量注入到innerHTML中之前，您需要对其进行一些操作。这是完整的代码。

addCourses() {

   const courses = this.courses.filter((item) => {
   return this.selectedCourses.indexOf(item.id) > -1
   });

  courses.forEach((course) => {
  this.packageForm.package_courses.push({
     course_id: course.id,
     course: course,
     price: 0
  });
});
this.selectedCourses = [];
},

Answer 2

使用replace查找并交换您要查找的整个字符串。不过，直到整个单词都可见后，该内容才可见。

if (i == 26) {
    var txt = document.getElementById("demo").innerHTML;
    txt.replace("effect!", "<span style='color:blue;'>effect!</span>");
    document.getElementById("demo").innerHTML = txt
}

如果您希望“随您走”，则需要将i在20到26之间的范围内的每个字符环绕，作为将其添加到DIV中的一部分。

document.getElementById("demo").innerHTML += "<span style='color:blue;'>" + txt.charAt(i) + "</span>";

如何使用div / span中没有的JavaScript选择文本

2 个答案: