Javascript 键入数组中的第一项后，键入动画光标将消失

我正在制作一个键入动画-它显示我想要的格式和文字，除了光标动画按预期键入第一个项目外，但一旦键入“item1”，光标将消失。我希望光标在键入所有剩余项目时保持在屏幕上，并仅在键入最后一个项目后消失。请参阅下面的代码片段，以了解它当前的功能

var TxtRotate=函数（el、toRotate、period、fixedText）{
this.toRotate=toRotate；
this.el=el；
this.loopNum=0；
this.period=parseInt（period，10）| 2000；
this.txt=“”；
this.fixedText=fixedText；
这个。勾选（）；
this.isDeleting=false；
};
TxtRotate.prototype.tick=函数（）{
//文本完成时停止
如果（this.loopNum>=this.toRotate.length）返回；
var i=this.loopNum；
var fullTxt=this.toRotate[i]；
//获取需要追加到跨度中的子字符串的字母
this.txt=fullTxt.substring（0，this.txt.length+1）；
if（this.loopNum==0）{
this.el.innerHTML=''+this.fixedText+''+this.txt+''；
}否则{
//在屏幕上添加一个字母
var间距=“”；
var countSpacing=0
而（countSpacing<（this.fixedText.length*2））{spacing=spacing+“”；countSpacing++；}
this.el.innerHTML=''+间距+this.txt+''；
}
var=这个；
//计算写下一封信之前等待的时间
var delta=300-Math.random（）*100；
//如果退格，则将其减少一半
如果（this.isDeleting）{delta/=2；}
//如果单词完整
如果（！this.isDeleting&&this.txt===fullTxt）{
//增加500倍的延迟
δ=500；
//添加新行(

this.el.innerHTML=`${this.el.textContent}
`；
//向元素添加同级元素
var next_txt=document.createElement（“span”）；
//将同级元素添加到父元素
this.el.parentNode.appendChild（next_txt）；
//让你的自我成为新元素，以便下次它写入新元素
this.el=next_txt；
//选择下一个单词
这个.loopNum++；
//清除当前文本
this.txt=“”；
}
setTimeout（函数（）{
那。勾选（）；
}，三角洲）；
};
window.onload=函数（）{
var elements=document.getElementsByClassName（'txt-rotate'）；
对于（var i=0；i.wrap{border right:0.08em solid#666}”；
document.body.appendChild（css）；
}；

---

试试这个，看看大小。我对代码做了以下更改。我删除了数组中的最后4项，只是为了让动画运行得更快：

• 您的一个主要问题是，您认为您正在将新的span元素添加为“txt rotate”span的同级元素，但是您没有，正如在inspector中所看到的那样。因此，您的CSS代码会影响“.txt rotate>.wrap”元素永远不会对它做任何事情。我稍微修改了代码，使用CSS将伪元素添加到任何.wrap span元素中。编写完整个单词后，我将删除“wrap”类

• 如前所述，我使用了一个伪元素作为光标，而不是像你所用的边框。但是如果你需要边框，你可以调整CSS

var TxtRotate=函数（el、toRotate、period、fixedText）{
this.toRotate=toRotate；
this.el=el；
this.loopNum=0；
this.period=parseInt（period，10）| 2000；
this.txt=“”；
this.fixedText=fixedText；
这个。勾选（）；
this.isDeleting=false；
};
TxtRotate.prototype.tick=函数（）{
//文本完成时停止
var i=this.loopNum；
如果（i>=this.toRotate.length）返回；
var fullTxt=this.toRotate[i]；
//获取需要追加到跨度中的子字符串的字母
this.txt=fullTxt.substring（0，this.txt.length+1）；
if（this.loopNum==0）{
this.el.innerHTML=''+this.fixedText+''+this.txt+''；
}否则{
//在屏幕上添加一个字母
var间距=“”；
var countSpacing=0
while（countSpacing<（this.fixedText.length*2））{
间距=间距+“”；
countspace++；
}
this.el.innerHTML=''+间距+this.txt+''；
}
var=这个；
//计算写下一封信之前等待的时间
var delta=300-Math.random（）*100；
//如果退格，则将其减少一半
如果（this.isDeleting）{delta/=2；}
//如果单词完整
如果（！this.isDeleting&&this.txt===fullTxt）{
//增加500倍的延迟
δ=500；
//添加新行(

this.el.innerHTML=`${this.el.textContent}
`；
//向元素添加同级元素
var next_txt=document.createElement（“span”）；
//将同级元素添加到父元素
this.el.parentNode.appendChild（next_txt）；
//让你的自我成为新元素，以便下次它写入新元素
this.el=next_txt；
//选择下一个单词
这个.loopNum++；
//清除当前文本
this.txt=“”；
}
setTimeout（函数（）{
那。勾选（）；
}，三角洲）；
};
window.onload=函数（）{
var elements=document.getElementsByClassName（'txt-rotate'）；
对于（var i=0；i