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/

我希望它可以提供帮助

Answer 2

尝试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
        };}

使用JS循环打字效果

2 个答案: