Web入門：JavaScript文字動畫
阿新 • • 發佈：2022-12-05
案例內容
演示
學習
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>小院裡的霍大俠</title> </head> <body> <div class="container"></div> </body> <script> const containerEI=document.querySelector(".container"); const careers=["跟著我","每天學習一點點","讓你不再枯燥","不再孤單"]; let careerIndex=0; let characterIndex=0; updateText(); function updateText() { characterIndex++; containerEI.innerHTML=` <h1>歡迎來到我的小院${careers[careerIndex].slice(0,characterIndex)}</h1> `; if(characterIndex===careers[careerIndex].length){ careerIndex++; characterIndex=0; } if(careerIndex===careers.length){ careerIndex=0; } setTimeout(updateText,400); } </script> <style> body { margin: 0; display: flex; justify-content: center; height: 100vh; align-items: center; background-color: #fd946a; font-family: "Permanent Marker", cursive; } </style> </html>
總結思考
學習點：
1、document.querySelector()返回container元素的資訊
2、innerHTML：更改html元素的內容，可以設定或返回表格行的開始和結束標籤之間的HTML
3、slice(引數1，引數2) :從已有的陣列中返回選定的元素
引數1：從何處開始選取
引數2：從何處結束選取
4、setTimeout()：定時執行一個函式或指定的一段程式碼
使用JavaScript完成文字的逐步展現，可以做一個簡短的動畫，讓介面更加生動有趣。
關注我，跟著我每天學習一點點，讓你不在枯燥，不在孤單..
全網可搜：小院裡的霍大俠， 免費獲取簡單易懂的實戰程式設計案例。程式設計/就業/副業/創業/資源。
私微信：huodaxia_xfeater
二維碼： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公眾號：有個小院（微信公眾號：yougexiaoyuan）
github：yougexiaoyuan (視訊原始碼免費獲取)
（部分素材來源於網際網路，如有保護請聯絡作者）