JavaScript 中的打字效果

Question

I'm wanting to create a webPage whereby most of the text is typed on the screen as if the page is typing to the reader in real time.我想创建一个网页，其中大部分文本都在屏幕上键入，就好像页面正在实时向读者键入一样。 Thus far, I've come up with this code, and it gets the words on screen, but it does not do so in a typed effect manner.到目前为止，我已经提出了这段代码，它可以在屏幕上显示文字，但它并没有以打字效果的方式进行。

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

Answer 1

One of the things that are going wrong in your example is that for each letter in txt you start a new interval without ever stopping the interval, this creates a memory leak.您的示例中出错的一件事是，对于 txt 中的每个字母，您开始一个新的间隔而从未停止该间隔，这会产生 memory 泄漏。

What's actually happening that causes your txt to visually be printed all at once is that by passing addLetter to the interval like this: setInterval(addLetter("typed"),speed);导致您的 txt 一次视觉打印的实际情况是，通过将addLetter传递给这样的间隔： setInterval(addLetter("typed"),speed); you actually invoke the function before ever it gets passed into the interval.您实际上在 function 被传递到间隔之前调用它。 In reality, the txt is printed in the speed of your for loop .实际上， txt以您的for loop的速度打印。

What you need to do is pass an anonymous function that invokes addLetter with the right parameters, see answer.您需要做的是传递一个匿名 function 调用addLetter并使用正确的参数，请参阅答案。

Solution:解决方案：

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

JavaScript 中的打字效果

问题描述

1 个解决方案

解决方案1
3 已采纳 2019-11-20 11:22:44

JavaScript 中的打字效果

问题描述

1 个解决方案

解决方案1 3 已采纳 2019-11-20 11:22:44

解决方案1
3 已采纳 2019-11-20 11:22:44