javascript - 使用js循环实现打字机效果, 当循环几次后输出的内容逐渐变少?
本文介绍了javascript - 使用js循环实现打字机效果, 当循环几次后输出的内容逐渐变少?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
前几次是正常的, 几次后, 每一个完整的输出内容就少一个字, 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>打字机效果</title>
<style>
.typewriter {
width: 50rem;
padding: 1.5rem 3rem;
border: 1px solid #ccc;
line-height: 1.5;
font-size: 1.6rem;
color: #333;
margin: 5% auto;
}
@@keyframes flash {
0% {
visibility: visible;
}
100% {
visibility: hidden;
}
}
.typewriter:after {
content: "_";
animation: flash .6s steps(2, start) infinite;
}
</style>
</head>
<body>
<div class="typewriter">
1. Whatever is worth doing is worth doing well.<br /> 任何值得做的，就把它做好。
</div>
<script>
function show() {
var typewriter = document.querySelector('.typewriter');
var code = typewriter.innerHTML;
var i = 0;
typewriter.innerHTML = "";
typeWriting();
function typeWriting() {
i++;
if (i < code.length) {
switch (code.charAt(i)) {
case '<':
i = code.indexOf(">", i);
break;
case '&':
i = code.indexOf(";", i);
break;
}
typewriter.innerHTML = code.substr(0, i);
setTimeout(typeWriting, 150);
} else {
setTimeout(show, 2000);
}
}
}
window.onload = show;
</script>
</body>
</html>
解决方案
问题出在这里，以后每次的innerHTML都会少一个字，所以再次调用 show 方法时句子已经不是完整的了。
if (**i <= code.length**) {
//......
}这篇关于javascript - 使用js循环实现打字机效果, 当循环几次后输出的内容逐渐变少?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
