原理

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

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. [转帖]如何在KingbaseES数据库查看数据库和表的大小

    关键字 kingbaseES,数据库大小,表大小 1.查看单个数据库的大小 使用ksql连接到数据库,使用sys_database_size函数 kapp=# select sys_database_ ...

  2. [转帖]优化命令之sar——最牛命令

    目录 一:sar命令概述 1.1sar概述 1.2sar常用选项 1.3常用参数 二:CPU资源监控 2.1整体CPU使用统计(-u) 2.2各个CPU使用统计(-P) 2.3将CPU使用情况保存到文 ...

  3. [转帖]Redis中的Lua脚本

    最近琢磨分布式锁时接触到的知识点,简单记一下. 文章目录 1. Redis中的Lua 2. 利用Lua操作Redis 3. Lua脚本的原子性 4. 关于 EVALSHA 5. 常用`SCRIPT` ...

  4. [转帖]龙芯3A5000评测 国产自主指令集架构实战

      https://tieba.baidu.com/p/8297036384?pid=147031768904&cid=#147031768904 芯片,是世界一大难题,很多人难以想象电子硬件 ...

  5. 根据TxID获取上链数据

    根据TxID获取上链信息 前段时间应甲方爸爸的要求,需要在现有的业务系统中新增一个根据TxID来查询上链信息的接口.搜了一圈发现相关的信息很少,最后只能祭出终极大招:Read Source Code. ...

  6. 基于go-restful实现的PoW算力池模型

    最开始知道区块链是在17年初,当时因为项目压力不大,开始研究比特币源码.对于比特币中提到的Proof of Work,当时只是一眼带过,并没有详细查看过相关的代码.在最近的项目中,考虑到性能的要求,需 ...

  7. TienChin-课程管理-展示课程列表

    配置按钮权限 博主这里就不贴SQL了,自行手动添加一下吧. 更改表结构 ALTER TABLE `tienchin_course` MODIFY COLUMN `info` varchar(255) ...

  8. 个人找工作面试准备------以及别人面试心得｛待更新中ing｝

    参考链接先放: https://blog.csdn.net/u014400934/article/details/102577804?utm_medium=distribute.pc_relevant ...

  9. Java多线程-JUC-1（八）

    前面把线程相关的生命周期.关键字.线程池(ThreadPool).ThreadLocal.CAS.锁和AQS都讲完了,现在就剩下怎么来用多线程了.而要想用好多线程,其实是可以取一些巧的,比如JUC(好 ...

  10. SpringCloud-03-Nacos配置管理

    Nacos配置管理 原理图: 1.统一配置管理 ① 在Nacos中添加配置信息 ② 在弹出表单中填写配置信息 ③ 配置获取的步骤*(原理) ④ 引入Nacos的配置管理客户端依赖 <!--nac ...