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

前端修罗场

发布于 2023-10-07 18:47:15

1830

发布于 2023-10-07 18:47:15

文章被收录于专栏：Web 技术Web 技术

效果如图：

实现：

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

javascript