歡迎來的我的小院，恭喜你今天又要漲知識了！
案例內容
利用JavaScript實作文字逐步展現的影片效果，
演示
學習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>小院里的霍大俠</title>
</head>
<body>
<div ></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 (視頻原始碼免費獲取)
（部分素材來源于互聯網，如有保護請聯系作者）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/539176.html
標籤：JavaScript
上一篇：異步編程
下一篇：常用Vue UI框架的主題切換