我正在尝试使用javascript创建一个简单的类型和删除效果，但是，在打字效果之后，它删除了最后一个字母，然后我得到了一个无尽的未定义屏幕。这是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>Test Typing Effect</title>
</head>
<body>
<script type="text/javascript">
window.onload =function() {
var texttotype = "this is what i want to type";
var typedtext = "";
function eraze(){
if(typedtext != ""){
var eraze = setInterval(function(){
typedtext = typedtext.slice(0, typedtext.length -1);
document.getElementById('type-here').innerHTML = typedtext;
if (typedtext == "") {
clearInterval(eraze);
return
}
}, 200);
}
}
if(typedtext == ""){
var i = 0;
var id = setInterval(function(){
if(typedtext != texttotype){
typedtext +=texttotype[i];
document.getElementById('type-here').innerHTML = typedtext;
} else if (typedtext == texttotype) {
eraze();
}
i++;
}, 200);
}
}
</script>
<p id="type-here"></p>
</body>
</html>
顺便说一句，每段代码都是单独工作的，打字类型和删除删除，我只是无法让它打字然后删除。任何方向或建议将不胜感激。谢谢!!!!
最佳答案
当所有文本都已写入后，需要停止写入文本的功能。否则它将超出字符串末尾并向页面添加“undefined”。
window.onload = function () {
var texttotype = "this is what i want to type";
var typedtext = "";
function eraze() {
if (typedtext != "") {
var eraze = setInterval(function () {
typedtext = typedtext.slice(0, typedtext.length - 1);
document.getElementById('type-here').innerHTML = typedtext;
if (typedtext == "") { //all done
clearInterval(eraze);
write();
return
}
}, 200);
}
}
function write() {
if (typedtext == "") {
var i = 0;
var keepWriting = setInterval(function () {
if (typedtext != texttotype) {
typedtext += texttotype[i];
document.getElementById('type-here').innerHTML = typedtext;
} else if (typedtext == texttotype) {
clearInterval(keepWriting);
eraze();
return;
}
i++;
}, 200);
}
}
write();
}
关于javascript - 简单类型和删除效果不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36537785/