【前端三分钟】利用Javascript实现打字效果

原创已于 2022-04-13 20:49:15 修改 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#打字交过 #前端三分钟

于 2019-05-12 20:36:54 首次发布

javascript 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一个简单的HTML和JavaScript实现的打字效果动画。通过逐步显示字符并在末尾添加光标来模仿真实的打字过程，同时包含光标的闪烁效果。代码中使用了setTimeout函数来控制字符的逐个显示和光标的闪烁频率。

在这里插入图片描述
效果如图：

实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="text">

</div>
</body>
<script>
  let divTyping = document.getElementById('text')
  let i = 0,
      timer = 0,
      str = 'hello world\n你好世界'

  function typing () {
    if (i <= str.length) {
      let char = str.slice(0, i++);
      divTyping.innerHTML = '<span class="word">'+str.slice(0, i++)+'</span>'+ '<span class="cursor">|</span>';
      timer = setTimeout('typing()', 200)
    }
  }
  function disappear() {
    let cursor = document.querySelector('.cursor');
    cursor.innerHTML = '';
    setTimeout(appear,200);
  }
  function appear() {
    let cursor = document.querySelector('.cursor');
    cursor.innerHTML = '|';
    setTimeout(disappear,200);
  }

  typing();
  disappear();
</script>
</html>