Urara-Blog/urara/2022-03-09-typewriter.md

title	summary	date	tags	categories	lastmod
JavaScript · 打字机效果生成器	用 JavaScript 实现网页打字机效果	2022-03-08T16:19:05.137Z	JavaScript	JavaScript	2022-04-07T07:40:27.758Z

题目

来源：百度前端学院

参照 打字机效果 DEMO (opens new window)，实现一个打字机效果生成器

需求说明

• 在输入框中输入需要实现打字机效果的文本
• 实现原理使用定时器间隔一段时间递增地截取字符串的长度
• 点击 button 实现打字机效果的生成，将文本输出到 id 为 showText 的标签中

<label>请输入文本:</label>
<input type="text" />
<button onclick="generateTypeEffect()">生成打字效果</button>
<h2 id="showText"></h2>
<script>
  function generateTypeEffect() {
    //这里实现打字机效果
    //将内容显示在h2中
  }
</script>

解法

<label>请输入文本:</label>
<input type="text" />
<button onclick="generateTypeEffect()">生成打字效果</button>
<h2 id="showText"></h2>
<script>
  let i = 0
  function generateTypeEffect() {
    const output = document.getElementById('showText')
    const input = document.querySelector('input').value
    if (i < input.length) {
      output.textContent += input[i]
      setTimeout(generateTypeEffect, 200, ++i)
    }
  }
</script>

参考

How TO - Typing Effect