javascript - 使用JS循环打字效果

Question

我有一个打字效果的代码(在JS、CSS和html下面)，但是我不能循环这个效果。我希望它在 e 之后完成。 G。十秒清除并再次打字。该效果应无限重复。我试图在键入后循环以清除文本，悬停它不起作用。任何线索/想法？谢谢。

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);

Answer 1

好的，我想我找到了问题所在。问题出在 setInterval() 方法上，只是清除标签不起作用。

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

if (cursorPosition < HTML.length - 1) {

        setTimeout(type, tempTypeSpeed);
}

这将在 tempTypeSpeed 时间后调用函数 type()，但是当 cursorPoint 达到 HTML 的长度时它会停止。

因此，我建议不要使用 setInterval，而是添加此检查:

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

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

重新初始化函数:

function reinit(){

    typewriter = setupTypewriter(typer);

    typewriter.type();
}

我还修改了一些 css(使 | 有效地闪烁)。

JSFiddle:

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

希望对你有帮助