Javascript 使用JS实现打字效果中的循环

我有一个打字效果的代码（在JS、CSS和html下面），但是我不能循环这个效果。我想在e。G清除10秒，然后再次打字。这种效果应该无限重复。我试着在输入后循环清除文本，悬停不起作用。有什么线索/想法吗？谢谢

CSS:

打字机{ 字号：18px； 保证金：0； 背景：无； 边界：无； 颜色：黑色； 字体系列：Exo-Regular；} 前：：后{ 内容：“|”； 动画：闪烁500毫秒线性无限交替； 颜色：rgb（255,20147）；} HTML: 我的打字效果 JS: 功能设置打字机（t）{ var HTML=t.innerHTML； t、 innerHTML=“”； var cursorPosition=0， tag=“”， writingTag=false， tagOpen=false， 打字速度=50， 速度=0； 变量类型=函数（）{ if（writingTag==true）{ tag+=HTML[cursorPosition]； } 如果（HTML[光标位置]=“”）{ TentypeSpeed=（Math.random（）*typeSpeed）+50； writingTag=false； 如果（tagOpen）{ var newSpan=document.createElement（“span”）； t、 儿童（新闻潘）； newSpan.innerHTML=标记； tag=newSpan.firstChild； } } 光标位置+=1； if（光标位置在

setInterval

setInterval(function(){ typewriter.innerHTML = "" }, 100);

同样，100毫秒的时间不足以看到任何事情发生，它是。1秒，试试3000秒

setInterval(function(){ typewriter.innerHTML = "" }, 3000);

另外，我想您在打字机上还有另一个类似于

setHTML

的功能：

  function setupTypewriter(t) {
     ...
     ...
    var setHTML = function(){ t.innerHTML = '';}
    ...
    ...
       return {
            type: type,
            setHTML: sertHTML
        };}

---

好的，我想我解决了问题。问题在于setInterval（）方法，只需清除标记不起作用

这个问题可能与递归函数有关。在这种情况下，您需要在函数结束后调用函数本身。当到达最后一个字符时，函数结束：

if (cursorPosition < HTML.length - 1) {

        setTimeout(type, tempTypeSpeed);
}

它重新输入变量，调用设置打字机和键入方法。我在10000毫秒后调用它来模拟您的请求（10秒）。如果需要，可以将时间存储在变量中，并用该变量替换10000

Reinit功能：

function reinit(){

    typewriter = setupTypewriter(typer);

    typewriter.type();
}

我还对css做了一些修改（使|有效地闪烁）

JSFiddle：

我希望能有所帮助

if(cursorPosition == HTML.length - 1){
    setTimeout(reinit, 10000);
}

function reinit(){

    typewriter = setupTypewriter(typer);

    typewriter.type();
}