歡迎來的我的小院，恭喜你今天又要漲知識了！ 案例內容 利用JavaScript實現文字逐步展現的動畫效果。 演示 學習 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>小院里的霍大俠</title> </ ...
案例內容
演示
學習
<!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 (視頻源碼免費獲取)
（部分素材來源於互聯網，如有保護請聯繫作者）
