原理

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

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实现的自动打字效果示例

2020-11-18 原生js实现自动打字效果的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  3. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  4. jq与原生js实现收起展开效果

    jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  5. 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  6. javascript实现键盘自动打字效果

    最近在网上看到一个字符逐个出现的打字效果,觉得挺有趣的,想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符,于是就基于jQuery写了一个简单版的. <!DOCTYPE html&g ...

  7. 原生JS轮播-各种效果的极简实现（二）面向对象版本的实现和优化

    之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...

  8. 原生js实现拖拽效果

    面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...

  9. 【原生JS】自动渐变轮播

    渐变主要是通过CSS3的动画实现. 只需给css中添加transtion动画时间加上JS设置指定图片透明度显示与消失即可实现渐变过程. 效果图: HTML: <!DOCTYPE html> ...

  10. 原生JS编写的照片墙效果实例演示特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. [转帖]vs调试运行程序出现：“由于找不到MSVCP140D.dll，无法继续执行代码 ”的解决方法

    碎碎念 最近在使用Visual studio调试程序的时候,突然冒出了"由于找不到MSVCP140D.dll,无法继续执行代码.重新安装程序可能会解决次问题."的错误.如下图所示. ...

  2. [转帖]一个故事看懂CPU的TLB

    https://www.cnblogs.com/xuanyuan/p/15347054.html Hi,我是CPU一号车间的阿Q,还记得我吗,真是好久不见了- 我所在的CPU是一个八核CPU,就有八个 ...

  3. [转帖]总结：nginx502：Tomcat调优之acceptCount

    问题背景:UI页面点击会偶尔返回error,检查调用日志,发现nginx报502报错,因此本文即排查502报错原因. 如下红框可知,访问本机个备机的服务502了,用时3秒左右(可见并不是超时) 先给出 ...

  4. [转帖]RFC1180

    [译] RFC 1180:朴素 TCP/IP 教程(1991) 译者序 本文翻译自 1991 年的一份 RFC(1180): A TCP/IP Tutorial. 本文虽距今将近 20 年,但内容并未 ...

  5. Linux 查询最近占用内存最多的十个进程的方法

    ps -eo rss,pid,user,command --sort -rss | awk '{ hr=$1/1024 ; printf("%13.2f Mb ",hr) } { ...

  6. 【DS】【AtCoder】Pakencamp 2022 Day2 H

    2023.6.30 Problem Link 有 \(n\) 个帮派在打架,每个帮派有一个大小 \(a_i\),每相邻两个帮派有一个仇恨度 \(b_i\).现在有 \(Q\) 次单点修改 \(a_i\ ...

  7. js递归根据父级id获取所有的子节点

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. # 再次推荐github 6.7k star开源IM项目OpenIM性能测试及消息可靠性测试报告

    本报告主要分为两部分,性能测试和消息可靠性测试.前者主要关注吞吐,延时,同时在线用户等,即通常所说的性能指标.后者主要模拟真实环境(比如离线,在线,弱网)消息通道的可靠性. 先说结论,对于容量和性能: ...

  9. 宏观上看Spring创建对象的过程

    宏观上看Spring创建对象的过程 对于对象而言,可以分为简单对象和复杂对象: 简单对象 简单对象指可以直接new的对象: Spring在创建这些对象时,是基于反射来完成的. 复杂对象 复杂对象指不能 ...

  10. 4.1 C++ Boost 字符串处理库

    Boost 库是一个由C/C++语言的开发者创建并更新维护的开源类库,其提供了许多功能强大的程序库和工具,用于开发高质量.可移植.高效的C应用程序.Boost库可以作为标准C库的后备,通常被称为准标准 ...