第222练打字效果：
完整的代码实现过程：
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>第222练</title><link rel=”stylesheet” href=”index.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: #fafafa;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);}
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
