预览

打字机动画是一种常见的网页效果，通常用于“我是某某”这样的场景，比如个人简介或者产品介绍，需要在多个词汇之间切换。这篇博文将从头开始制作类似的效果。它看起来像这样：

我要成为
赛马娘
高手！

如果这里的黄字不会动，可能是因为这里的架构不支持，请到https://penghy.com/?p=typing-switching-animation-with-a-html-single-file查看效果

没错，这就是本站首页上的动画。由于不需要导入 CSS、JavaScript 等文件，因此可以轻松地嵌入到各种博客的HTML容器中。

基础文本

首先像往常一样创建基本文本，例如：

我要成为 <br> 赛马娘<br> 高手！

我要成为
赛马娘
高手！

可以在 <span> 标签内用 id 标记中间行，然后在 <style> 标签内写入 css 样式来更改文本颜色。

<span id = "Text01"><!-- 用 id“Text01”标记这些文本-->   Pretty Derby<br> </span>  <style>   #Text01 /*设置ID为“Text01”的文本样式*/   {     color : #FF8000;   } </style>

我要成为
赛马娘
高手！

单词切换动画

要通过脚本来更改文本内容，首先需要创建一个变量来获取目标文本。由于中间行已经标记了id“Text01”，所以可以通过“document”实现。顺便说一句，JavaScript也可以直接写在<script>标签中。

<script>     const text = document.getElementById("Text01");    //获取标记的文本     text.textContent = "原神";    //设置文本内容 </script>

我要成为
赛马娘
高手！

现在创建一个函数和一个数组，让它自动切换。

每当执行此函数时，索引就会从 0 循环递增到数组的长度。

<script> const words = ["C++","Go","Unreal","Unity"];    //任何想要显示的词汇 const text = document.getElementById("Text01");    //获取标记的文本 let wordIndex = 0;    //当前词在words数组中的索引 let delay = 100;    //显示词汇切换的间隔  const UpdateText = () =>     {         text.textContent = words[wordIndex];    //将文本内容设置为数组中对应的词汇         wordIndex++;    //index++ , 准备好显示下一个词         if(wordIndex>=words.length)             wordIndex = 0;    //当索引超过长度时将其重置为零，使其循环显示          setTimeout(UpdateText,delay);    //一定延迟后再次调用该函数 			     }  UpdateText();    //不要忘了调用这个函数 </script>

我要成为
赛马娘
高手！

字符打字动画

使字符逐个出现，主要是通过分割字符串。正好有一个简单的函数叫substring。

比如将文本内容设置为数组“words”的第“wordIndex”元素的第一个“charIndex”字符：

text.textContent = words[wordIndex].substring(0,charIndex); 

一开始，默认状态是输入，也就是说“charIndex”每次都会增加。可以使用名为“isDelete”的布尔变量来记录状态。

let isDelete = false;

出现字符意味着“isDelete”将为false。当“charIndex”大于“worlds”的当前元素时，将“isDelete”设置为true。

同时，为“延迟”设置较长的时间，使其在状态发生变化时停留的时间更长。

if(!isDelete)     {         delay = DefaultDelay; //当当前状态为默认状态时，不要忘记将延迟重置为默认时间         charIndex++;         if(charIndex-1==words[wordIndex].length)         {             delay = WaitDelay;             isDelete = true;         }     }

如果状态为“Deleting”，则每次charIndex都会减1。当索引下降到0时，或者说所有当前单词都已被删除时，就意味着是时候切换到下一个单词了。复制之前在里面写的“切换单词”的代码。

 else if(isDelete)     {         delay = DefaultDelay;         charIndex--;         if(charIndex<1)         {             isDelete = false;             wordIndex++;             if(wordIndex>=words.length)             wordIndex = 0;         }             }

芜湖！现在代码就基本完成了。如果需要在某些博客中嵌入此功能，只需将所有代码直接复制并粘贴到 html 容器中即可！

完整源代码

<div>     我要成为 <br>      <span id = "text">     赛马娘     </span><br>      高手!  </div>  <style>     #text      {       color : #FF8000;     } </style>  <script>           const words = ["C++","Go","Unreal","Unity"];           const text = document.getElementById("text");           let wordIndex = 0;           let charIndex = 0;            let isDelete = false;           let DefaultDelay = 100;           let WaitDelay = 700;           let delay = 100;           const UpdateText = () =>           {               text.textContent = words[wordIndex].substring(0,charIndex);                  if(!isDelete)               {                   delay = DefaultDelay;                   charIndex++;                   if(charIndex-1==words[wordIndex].length)                   {                       delay = WaitDelay;                       isDelete = true;                   }               }               else if(isDelete)               {                   delay = DefaultDelay;                   charIndex--;                   if(charIndex<1)                   {                       isDelete = false;                       wordIndex++;                       if(wordIndex>=words.length)                           wordIndex = 0;                   }                       }               setTimeout(UpdateText,delay);           };           UpdateText(); </script>

希望本教程能够有所帮助。