2020-11-18 原生js实现自动打字效果

最新推荐文章于 2023-12-04 16:41:59 发布

方朝端

最新推荐文章于 2023-12-04 16:41:59 发布

阅读量240

点赞数

分类专栏： html 原生js学习

本文链接：https://blog.csdn.net/seetoyou/article/details/109764597

版权

原生js学习同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

原理

使用定时器，对要输出的文字进行遍历，每遍历一次，都增加一个字以及在段尾加上"|"暗示别人正在打字。

js代码

      const fangWrite = (theString, queryString, timeInterval, identifier) => {
        const thisString = theString || "";
        const thisQueryString = queryString || "body";
        const thisDOM = document.querySelectorAll(queryString)[0];
        const thisTimeInterval = timeInterval || 200;
        const thisIdentifier = identifier || "|";

        for (let index = 0, thisWrite = ""; index < theString.length; index++) {
          thisWrite = thisWrite + theString[index];
          const theTime = thisTimeInterval * index;
          setTimeout(
            (thisDOM, thisWrite, thisIdentifier) => {
              thisDOM.innerHTML = thisWrite + thisIdentifier;
            },
            theTime,
            thisDOM,
            thisWrite,
            thisIdentifier
          );
        }
        const theTime = thisTimeInterval * theString.length;
        setTimeout(() => {
          thisDOM.innerHTML = theString;
        }, theTime);
      };
      fangWrite("js 实现的 打字效果，感觉蛮有趣的。", "body", 200, "_");

页面代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>自动打字</title>
  </head>
  <body>
    <div id="divTyping"></div>
    <script>
      const fangWrite = (theString, queryString, timeInterval, identifier) => {
        const thisString = theString || "";
        const thisQueryString = queryString || "body";
        const thisDOM = document.querySelectorAll(queryString)[0];
        const thisTimeInterval = timeInterval || 200;
        const thisIdentifier = identifier || "|";

        for (let index = 0, thisWrite = ""; index < theString.length; index++) {
          thisWrite = thisWrite + theString[index];
          const theTime = thisTimeInterval * index;
          setTimeout(
            (thisDOM, thisWrite, thisIdentifier) => {
              thisDOM.innerHTML = thisWrite + thisIdentifier;
            },
            theTime,
            thisDOM,
            thisWrite,
            thisIdentifier
          );
        }
        const theTime = thisTimeInterval * theString.length;
        setTimeout(() => {
          thisDOM.innerHTML = theString;
        }, theTime);
      };
      fangWrite("js 实现的 打字效果，感觉蛮有趣的。", "#divTyping", 200, "_");
    </script>
  </body>
</html>

仿写来源：
JS实现的自动打字效果示例

方朝端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2020-11-18 原生js实现自动打字效果

原理使用定时器，对要输出的文字进行遍历，每遍历一次，都增加一个字以及在段尾加上"|"暗示别人正在打字。js代码 const fangWrite = (theString, queryString, timeInterval, identifier) => { const thisString = theString || ""; const thisQueryString = queryString || "body"; const th
复制链接

扫一扫