我想创建一个网页，以便在屏幕上键入大部分文本，就像该页面正在实时向读者键入一样。到目前为止，我想出了这段代码，它在屏幕上显示了单词，但它不是以键入效果的方式显示的。
<html>
<head>
<title>Murder on the Menu</title>
<style type="text/css">
body{
background-color:#222222;
margin:0px;
padding:0px;
}
#typed{
color:red;
font-size:150%;
float:left;
}
.cursor{
height:24px;
width:2px;
background:lawngreen;
float:left;
opacity:0;
animation:blink 0.75s linear infinite alternate;
}
@keyframes blink{
50% {
opacity:0;
}
100% {
opacity:1;
}
}
</style>
</head>
<body>
<div id="typed"></div>
<div class="cursor"></div>
<script type="text/javascript">
var i=0;
var txt='Murder on the Menu: a production by Brendan Lewis.';
var speed=500;
var identifier;
function addLetter(word){
document.getElementById(word).innerHTML += txt.charAt(i);
}
for(i=0;i<txt.length;i++){
setInterval(addLetter("typed"),speed);
}
</script>
</body>
示例中出现的错误之一是，对于txt中的每个字母，您都开始一个新的间隔而没有停止间隔，这会导致内存泄漏。
实际上发生的使txt一次全部可见的事情是，通过将addLetter传递到这样的间隔：setInterval(addLetter("typed"),speed);实际上，在将函数传递到间隔之前，您实际上是[[invoke函数。实际上，txt以for loop的速度打印。
addLetter，请参见答案。解决方案：
<script type="text/javascript">
var i=0;
var txt='Murder on the Menu: a production by Brendan Lewis.';
var speed=500;
var identifier;
var interval = setInterval(function() {
return addLetter("typed")
}, speed);
function addLetter(word){
document.getElementById(word).innerHTML += txt.charAt(i);
if (i < txt.length) i++;
else clearInterval(interval)
}
</script>