循环使用JS的打字效果

我有一个打字效果的代码（下面是JS，CSS和html），但是我无法循环这个效果。我希望它完成后e。 G。十秒钟后清除并重新打字。效果应该无限重复。我试着做一个循环来清除键入后的文本，将其悬停不起作用。任何线索/想法？谢谢。循环使用JS的打字效果

CSS：

#typewriter { 
    font-size: 18px; 
    margin: 0; 
    background: none; 
    border: none; 
    color: black; 
    font-family: Exo-Regular;} 
    pre::after{ 
    content: "|"; 
    animation: blink 500ms linear infinite alternate; 
    color: rgb(255,20,147);} 


HTML: 
<pre id="typewriter"> 
         <span class="var-highlightST">my typewriting effect</span> 
        </pre> 

JS: 

function setupTypewriter(t) { 
    var HTML = t.innerHTML; 

    t.innerHTML = ""; 

    var cursorPosition = 0, 
     tag = "", 
     writingTag = false, 
     tagOpen = false, 
     typeSpeed = 50, 
     tempTypeSpeed = 0; 

    var type = function() { 

     if (writingTag === true) { 
      tag += HTML[cursorPosition]; 
     } 

     if (HTML[cursorPosition] === "<") { 
      tempTypeSpeed = 0; 
      if (tagOpen) { 
       tagOpen = false; 
       writingTag = true; 
      } else { 
       tag = ""; 
       tagOpen = true; 
       writingTag = true; 
       tag += HTML[cursorPosition]; 
      } 
     } 
     if (!writingTag && tagOpen) { 
      tag.innerHTML += HTML[cursorPosition]; 
     } 
     if (!writingTag && !tagOpen) { 
      if (HTML[cursorPosition] === " ") { 
       tempTypeSpeed = 0; 
      } 
      else { 
       tempTypeSpeed = (Math.random() * typeSpeed) + 50; 
      } 
      t.innerHTML += HTML[cursorPosition]; 
     } 
     if (writingTag === true && HTML[cursorPosition] === ">") { 
      tempTypeSpeed = (Math.random() * typeSpeed) + 50; 
      writingTag = false; 
      if (tagOpen) { 
       var newSpan = document.createElement("span"); 
       t.appendChild(newSpan); 
       newSpan.innerHTML = tag; 
       tag = newSpan.firstChild; 
      } 
     } 

     cursorPosition += 1; 
     if (cursorPosition < HTML.length - 1) { 
      setTimeout(type, tempTypeSpeed); 
     } 

    }; 

    return { 
     type: type 
    };} 

var typer = document.getElementById('typewriter'); 

typewriter = setupTypewriter(typer); 

typewriter.type(); 

var i = 0; 
setInterval(typewriter.innerHTML = "", 100);

来源

2017-04-03 Mikisz

好吧，我想我找到了问题。问题是关于setInterval（）方法，只是清除标记不起作用。

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

if (cursorPosition < HTML.length - 1) { 

     setTimeout(type, tempTypeSpeed); 
}

这将调用tempTypeSpeed时间后函数类型（），但是当cursorPoint达到HTML的长度，它停止。

因此，而不是使用setInterval的，我会建议增加这个检查：

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

它重新初始化变量，召回setupTypewriter和类型的方法。我在10000毫秒后调用它来模拟您的请求（十秒钟）。如果需要，可以将时间存储在变量中，并用该变量替换10000。

重新初始化函数：

function reinit(){ 

    typewriter = setupTypewriter(typer); 

    typewriter.type(); 
}

我还修改了一下的CSS（使|眨眼有效）。

的jsfiddle：

https://jsfiddle.net/86kftnou/3/

我希望它可以帮助

来源

2017-04-03 21:36:26 FFdeveloper

感谢您的帮助:)它完美:) – Mikisz

尝试setInterval

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

也100ms的功能是不够的时候看到什么情况发生，这是0.1秒，尝试3000

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

另外，我在打字机上有另一个功能，就像setHTML：

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

来源

2017-04-03 17:48:44

循环使用JS的打字效果

回答

相关问题