The first few times are normal. After a few times, each complete output content will be one less word. The code is as follows:
<!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>
<p class="typewriter">
1. Whatever is worth doing is worth doing well.<br /> 任何值得做的，就把它做好。
</p>
<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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The problem lies here, every time in the future, innerHTML will be one less word, so when the show method is called again, the sentence is no longer complete.