/

JavaScript · 打字机效果生成器

题目

来源：百度前端学院

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

需求说明

  • 在输入框中输入需要实现打字机效果的文本
  • 实现原理使用定时器间隔一段时间递增地截取字符串的长度
  • 点击 button 实现打字机效果的生成，将文本输出到 id 为 showText 的标签中
html
<label>请输入文本:</label>
<input type="text" />
<button onclick="generateTypeEffect()">生成打字效果</button>
<h2 id="showText"></h2>
<script>
  function generateTypeEffect() {
    //这里实现打字机效果
    //将内容显示在h2中
  }
</script>

解法

html
<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

%sveltekit.body%