如何使Java代码键入效果永远循环？

Question

我得到了这段文字键入的动画效果代码，该代码可以键入代码，并且可以正常工作，但是，我希望它在结束时始终具有3秒的延迟，从而永远循环播放。 动画和所有内容保持不变。 我只是不希望它结束​​，因为我显示在项目页面的一侧。

我将如何处理？

这是一个工作的JSFiddle： https ://jsfiddle.net/gsv0807f/

的HTML

<pre id="typewriter">
<span class="var-highlight">var</span> object = {
    name: <span class="string-highlight">'Foo'</span>,
    type: <span class="string-highlight">'Bar'</span>,
    location: <span class="string-highlight">'Earth'</span>,
    properties:[<span class="string-highlight">'Javascript'</span>,
                <span class="string-highlight">'HTML'</span>,
                <span class="string-highlight">'CSS'</span>];
}; </pre>

的CSS

.var-highlight {
  color: #c0ad60;
}
.string-highlight {
  color: rgba(253, 149, 90, 0.8);
}
#typewriter {
  font-size: 2em;
  margin: 0;
  font-family: "Courier New";
}
#typewriter:after {
  content: "|";
  -webkit-animation: blink 500ms linear infinite alternate;
          animation: blink 500ms linear infinite alternate;
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

JS

function setupTypewriter(t) {
    var HTML = t.innerHTML;
    t.innerHTML = "";
    var cursorPosition = 0,
        tag = "",
        writingTag = false,
        tagOpen = false,
        typeSpeed = 100,
    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(typewriter);
typewriter.type();

Answer 1

只需更改结束条件：

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

对于无尽的：

cursorPosition = cursorPosition % HTML.length;
setTimeout(type, tempTypeSpeed);

Answer 2

我不确定您要如何重复此操作，但这将输入一次输出，等待三秒钟，清除输出，然后重新开始。

        cursorPosition += 1;
        if (cursorPosition >= HTML.length - 1) {
          setTimeout(function() {
            cursorPosition = 0;
            t.innerHTML = '';
            setTimeout(type, tempTypeSpeed);
          }, 3000);
        }
        else {
          setTimeout(type, tempTypeSpeed);
        }