分享一个使用 js 实现的打字机的展示效果,来显示我们的古诗。
HTML 代码
<div ></div>
JS 代码
const text = "床前明月光n 疑似地上霜n 举头望明月n 低头思故乡" const content = document.querySelector(".content"); var i = 0; var timer; (function typing() { content.innerHTML += text[i] i++ timer = setTimeout(typing, 100) if (i == text.length) { clearTimeout(timer); } })()
CSS 代码
* { margin: 0; padding: 0; } body { font-family: 'Times New Roman', Times, serif; background-color: #000; background-size: 100%; display: flex; align-items: center; justify-content: center; height: 100vh; position: relative; } .content { white-space: break-spaces; color: #fff; line-height: 30px; letter-spacing: 5px; font-size: 24px; text-shadow: white 0 0 5px; background-image: url("./moon.webp"); background-size: cover; background-repeat: no-repeat; height: 100vh; min-width: 80vh; display: flex; align-items: center; justify-content: center; }