利用JavaScript实现文字逐步展现的动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript文字动画</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>JavaScript文字动画${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完成文字的逐步展现,可以做一个简短的动画,让界面更加生动有趣。