JavaScript 中的打字效果

Question

我想创建一个网页，其中大部分文本都在屏幕上键入，就好像页面正在实时向读者键入一样。 到目前为止，我已经提出了这段代码，它可以在屏幕上显示文字，但它并没有以打字效果的方式进行。

<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

您的示例中出错的一件事是，对于 txt 中的每个字母，您开始一个新的间隔而从未停止该间隔，这会产生 memory 泄漏。

导致您的 txt 一次视觉打印的实际情况是，通过将addLetter传递给这样的间隔： setInterval(addLetter("typed"),speed); 您实际上在 function 被传递到间隔之前调用它。 实际上， txt以您的for loop的速度打印。

您需要做的是传递一个匿名 function 调用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>

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