前端知识案例学习11-前端实现自动打字效果

最新推荐文章于 2023-09-16 19:24:35 发布

前端歌谣

最新推荐文章于 2023-09-16 19:24:35 发布

阅读量356

点赞数 1

文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/qq_41632427/article/details/128069865

版权

前端小案例小结专栏收录该内容

1038 篇文章 1 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引用有字库站酷高端黑字体 -->
    <link
      href="http://cdn.repository.webfont.com/webfonts/nomal/135621/46969/5e3024eaf629d810708c2ad6.css"
      rel="stylesheet"
      type="text/css"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <!-- 定位文本到浏览器中央 -->
    <main>
      <!-- 文字容器，统一由h1控制 -->
      <h1>
        <!-- 使用span显示文字, data-text为Json格式的数组 -->
        <span
          id="text"
          data-text='["我是歌谣", "我是一名前端工程师", "微信公众号前端小歌谣"]'
        ></span>
        <!-- 闪烁的光标 -->
        <span class="mark"></span>
      </h1>
    </main>

    <script src="index.js"></script>
  </body>
</html>

css样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "huxiaobo-gdh1e91397a5f211c5", "PingFang SC", "Microsoft Yahei",
    sans-serif;
}

main {
  background: #2f3542;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

h1 {
  color: #f1f2f6;
  font-size: 5em;
  font-weight: 300;
}

span.mark {
  border-right: 2px solid white;
  animation: blink 0.6s step-end infinite;
}

@keyframes blink {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: white;
  }
}

js代码

// 获取显示文字的span元素
const textEl = document.querySelector("#text");
// 获取并解析要展示的文本数组
const texts = JSON.parse(textEl.getAttribute("data-text"));

// 当前显示文本数组中的第几个
let index = 0;
// 当前显示第几个字
let charIndex = 0;
// 每个字显示间隔默认是500毫秒
let delta = 500;

// 记录动画执行开始时间
let start = null;
// 是否为删除动画
let isDeleting = false;

// 动画回调函数
function type(time) {
  window.requestAnimationFrame(type);
  // 初始化开始时间
  if (!start) start = time;
  // 获取时间间隔
  let progress = time - start;
  // 每隔一定的时间，打印出一个新的字符
  if (progress > delta) {
    // 获取完整的字符
    let text = texts[index];
    // 如果是打字效果
    if (!isDeleting) {
      // 给展示文字的span新增一个字符，使用innerHTML来替换，charIndex自增1，然后返回新的字符串子串
      textEl.innerHTML = text.slice(0, ++charIndex);
      // 每个字符打印出来的速度不一样，模仿人工打字的速度
      delta = 500 - Math.random() * 400;
    } else {
      // 如果是删除效果，则把文字一个一个减掉
      textEl.innerHTML = text.slice(0, charIndex--);
    }
    // 把star更新为当前时间，进行下一个周期
    start = time;

    // 如果文字已经全部打印完毕
    if (charIndex === text.length) {
      // 下次开始删除文字
      isDeleting = true;
      // 删除文字的间隔为200毫秒
      delta = 200;
      // 额外等待1.2秒后再删除
      start = time + 1200;
    }

    // 如果文字删除完毕
    if (charIndex < 0) {
      isDeleting = false;
      // 额外增加200毫秒延迟
      start = time + 200;
      // 把index移动到下一个文本，并且在文本数组元素个数中循环
      index = ++index % texts.length;
    }
  }
}

window.requestAnimationFrame(type);