使用 JavaScript 和 CSS 实现打字和删除效果

借助 CSS 动画，我们可以使用 JavaScript 创建打字机打字和删除效果。无限循环效果也已设置。自定义函数将被调用，并且文字将以该效果显示。最后，这些文字将使用另一个自定义函数删除。

为文本和光标设置一个 div

首先，使用 <p> 元素设置一个父 div 容器。其中一个 <p> 将包含文本，另一个包含光标。

<div>
   <p id="text"></p>
   <p>|</p>
</div>

设置 <p> 元素的样式

为文本设置专业字体：

p {
   font-family: "Courier Monospace";
   font-size: 2em;
   color: red;
}

Learn JavaScript in-depth with real-world projects through our JavaScript certification course. Enroll and become a certified expert to boost your career.

“:last-of-type” 选择器

要匹配其父元素的最后一个子元素，请使用“:last-of-type”选择器。为其父元素的最后一个 <p> 元素设置动画：

p:last-of-type {
   animation: type 0.33s infinite;
}

上面，动画名称为 type，它使用关键帧设置动画规则。这里，使用 opacity 属性设置不透明度：

@keyframes type{
   to { opacity: .0; }
}

初始文字

设置以下文字，页面加载时将以打字效果进行动画：

const words = ["Nulla", "facilisi", "Cras sed odio sed leo laoreet molestie id non purus.."];

页面加载

页面加载时调用自定义函数进行打字：

function typeNow() {
   let word = words[i].split("");
   var loopTyping = function() {
      if (word.length > 0) {
         document.getElementById('text').innerHTML += word.shift();
      } else {
         deleteNow();
         return false;
      };
      counter = setTimeout(loopTyping, 200);
   };
   loopTyping();
};

对于删除效果：

function deleteNow() {
   let word = words[i].split("");
   var loopDeleting = function() {
      if (word.length > 0) {
         word.pop();
         document.getElementById('text').innerHTML = word.join("");
      } else {
         if (words.length > (i + 1)) {
            i++;
         } else {
            i = 0;
         };
         typeNow();
         return false;
      };
      counter = setTimeout(loopDeleting, 200);
   };
   loopDeleting();
};

超时

为了使打字和删除效果正常工作，调用了 setTimeout() 函数。以下代码适用于这两个事件，即输入和删除字母时：

counter = setTimeout(loopDeleting, 200);

示例

以下示例显示此效果：

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         display: flex;
         margin: 4%;
         padding: 2%;
         box-shadow: inset 0 0 12px blue;
      }
      p {
         font-family: "Courier Monospace";
         font-size: 2em;
         color: red;
      }
      p:last-of-type {
         animation: type 0.33s infinite;
      }
      @keyframes type{
         to { opacity: .0; }
      }
   </style>
</head>
<body>
   <div>
      <p id="text"></p>
      <p>|</p>
   </div>
   <script>
      const words = ["Nulla", "facilisi", "Cras sed odio sed leo laoreet molestie id non purus.."];
      let i = 0;
      let counter;
      function typeNow() {
         let word = words[i].split("");
         var loopTyping = function() {
            if (word.length > 0) {
               document.getElementById('text').innerHTML += word.shift();
            } else {
               deleteNow();
               return false;
            };
            counter = setTimeout(loopTyping, 200);
         };
         loopTyping();
      };
      function deleteNow() {
         let word = words[i].split("");
         var loopDeleting = function() {
            if (word.length > 0) {
               word.pop();
               document.getElementById('text').innerHTML = word.join("");
            } else {
               if (words.length > (i + 1)) {
                  i++;
               } else {
                  i = 0;
               };
               typeNow();
               return false;
            };
            counter = setTimeout(loopDeleting, 200);
         };
         loopDeleting();
      };
      typeNow();
   </script>
</body>
</html>

更新于：2024年1月2日

2K+ 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告