jquery - jQuery 打字机效果

Question

我正在尝试在滑块上使用这个名为 Typpy Tappy Typer https://codepen.io/stevn/pen/jEZvXa/的 jQuery 脚本。我能够让它工作，但在完成某张幻灯片后，它不会重做打字机动画。

有人可以帮我循环这个函数，让它连续运行吗？

这是代码片段：

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

.var-highlight{
	color: #C0AD60;
}
.string-highlight{
	color: rgba(253, 149, 90, 0.8);
}

#typewriter{
		font-size: 2em;
		margin: 0;
		font-family: "Courier New";

		&:after{
			content: "|";
			animation: blink 500ms linear infinite alternate;
		}
}

@-webkit-keyframes blink{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

@-moz-keyframes blink{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

@keyframes blink{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

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

标签： jquerycssslider

Answer 1

假设循环应该重置输入的文本然后重新输入，在循环结束时对检查的修改将简单地实现这一点：

cursorPosition += 1;
if (cursorPosition < HTML.length - 1) {
    setTimeout(type, tempTypeSpeed);
} else {
    // This new code will reset the output to the start again
    cursorPosition = 0;
    t.innerHTML = "";
    setTimeout(type, tempTypeSpeed);
}

它的作用是在输入最后一个字符后“重置”输出。然后整个输出重新开始。

这是一个工作片段：

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);
	        } else {
            cursorPosition = 0;
            t.innerHTML = "";
	          setTimeout(type, tempTypeSpeed);
          }

	    };

	    return {
	        type: type
	    };
	}

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

	typewriter = setupTypewriter(typewriter);

	typewriter.type();

.var-highlight{
	color: #C0AD60;
}
.string-highlight{
	color: rgba(253, 149, 90, 0.8);
}

#typewriter{
		font-size: 2em;
		margin: 0;
		font-family: "Courier New";

		&:after{
			content: "|";
			animation: blink 500ms linear infinite alternate;
		}
}

@-webkit-keyframes blink{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

@-moz-keyframes blink{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

@keyframes blink{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

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