循環使用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的打字效果

回答

相關問題