JavaScript自动文本效果动画
| 经营范围：电脑组装，电脑维修，智能家居设备，苹果电脑系统安装，苹果手机刷机，监控安装，媒体编辑，数据恢复，复印打印，网站制作等 |
HTML:
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Auto Text Effect Animation</title> <link rel="stylesheet" href="style.css" /> </head>
<body> <div class="container"></div> <script src="index.js"></script> </body>
</html> |
CSS:
|
@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap"); body { margin: 0; display: flex; justify-content: center; height: 100vh; align-items: center; background-color: salmon; font-family: "Permanent Marker", cursive; } |
JS:
|
const containerEl = document.querySelector(".container"); const careers = ["YouTuber", "Web Developer", "Freelancer", "Instructor"]; let careerIndex = 0; let characterIndex = 0; updateText();
function updateText() { characterIndex++; containerEl.innerHTML = ` <h1>I am ${careers[careerIndex].slice(0, 1) === "I" ? "an" : "a"} ${careers[ careerIndex ].slice(0, characterIndex)}</h1> `;
if (characterIndex === careers[careerIndex].length) { careerIndex++; characterIndex = 0; }
if (careerIndex === careers.length) { careerIndex = 0; } setTimeout(updateText, 400); } |
