預覽 打字機動畫是一種常見的網頁效果，通常用於“我是某某”這樣的場景，比如個人簡介或者產品介紹，需要在多個辭彙之間切換。這篇博文將從頭開始製作類似的效果。它看起來像這樣： 我要成為賽馬娘 高手！ 如果這裡的黃字不會動，可能是因為這裡的架構不支持，請到https://penghy.com/?p=typ ...
預覽
打字機動畫是一種常見的網頁效果，通常用於“我是某某”這樣的場景，比如個人簡介或者產品介紹，需要在多個辭彙之間切換。這篇博文將從頭開始製作類似的效果。它看起來像這樣：
我要成為
賽馬娘
高手！
如果這裡的黃字不會動，可能是因為這裡的架構不支持，請到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>
希望本教程能夠有所幫助。
