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

编程轨迹_

已于 2022-04-13 20:49:15 修改

阅读量1.7k

点赞数

分类专栏： javascript 文章标签：打字交过前端三分钟

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

本文链接：https://blog.csdn.net/ImagineCode/article/details/90144879

版权

javascript 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

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

实现：

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