模仿Chart GPT输出的打字效果

最新推荐文章于 2024-06-15 09:37:22 发布

Ronychen’s blog

最新推荐文章于 2024-06-15 09:37:22 发布

阅读量639

点赞数

分类专栏：常见页面效果文章标签： gpt

本文链接：https://blog.csdn.net/ronychen/article/details/130438906

版权

常见页面效果专栏收录该内容

1 篇文章 0 订阅

订阅专栏

demo代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>打字机</title>
  <style>
    .text {
      font-size: 40px;
    }

    .content {
      text-align: center;
      font-size: 0;
    }

    .blink {
      font-size: 40px;
      animation: tiaodong 1000ms infinite;
      -webkit-animation: tiaodong 1000ms infinite;
    }

    @keyframes tiaodong {
      from {
        opacity: 1;
      }

      50% {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }
  </style>
</head>

<body>
  <div class="content">
    <span class="blink" id='blink'>|</span>
  </div>
</body>
<script>
  function output(str) {
    const content = document.getElementsByClassName('content')[0]
    const blink = document.getElementById('blink');
    let i = 0
    const stI = setInterval(() => {
      if (str[i] === '\n') {
        const br = document.createElement('br');
        content.insertBefore(br, blink)
      } else {
        const span = document.createElement('span');
        span.classList.add('text')
        switch (str[i]) {
          case " ":
            span.innerHTML = '&nbsp'
            break;
          case '<':
            span.innerHTML = '&lt'
            break;
          case '>':
            span.innerHTML = '&gt'
            break;
          default:
            span.innerHTML = str[i]
            break;
        }
        content.insertBefore(span, blink)
      }
      i++;
      if (i >= str.length) {
        clearInterval(stI)
      }
    }, 200)
  }

  output('你好，我是你的智能机器人ChartGPT\n有什么可以帮你的吗？')
</script>

</html>