原理

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

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. [转帖]SQL Server超过了每行的最大字节数（8060）的原因和解决办法

    一.现象     出现这种错误都发生在SQL语句建表时,错误提示: "警告: 已创建表 'XXXX,但其最大行大小(10438)超过了每行的最大字节数(8060).如果结果行长度超过 806 ...

  2. [转帖] 容器内的Linux诊断工具0x.tools

    https://www.cnblogs.com/codelogs/p/16242999.html 原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介# Linux上有 ...

  3. [转帖]【JVM】字节码执行引擎

    引入 class文件就是字节码文件,是由虚拟机执行的文件.也就是java语言和C & C++语言的区别就是,整个编译执行过程多了一个虚拟机这一步.这个在 类文件结构 中已经解释.上一节讲了虚拟 ...

  4. js设置setAttribute、获取getAttribute、删除removeAttribute详细讲解

    setAttribute的理解 所有主流浏览器均支持 setAttribute() 方法. element.setAttribute(keys,cont) keys==>必需(String类型) ...

  5. 百度指数 Cipher-Text、百度翻译 Acs-Token 逆向分析

    K 哥之前写过一篇关于百度翻译逆向的文章,也在 bilibili 上出过相应的视频,最近在 K 哥爬虫交流群中有群友提出,百度翻译新增了一个请求头参数 Acs-Token,如果不携带该参数,直接按照以 ...

  6. Java中的基本数据类型和包装类型的这些知识，你都知道吗？

    Java中的基本数据类型和包装类型 Java 中的基本数据按类型可以分为四大类:布尔型.整数型.浮点型.字符型: 这四大类包含 8 种基本数据类型. 布尔型:boolean 整数型:byte.shor ...

  7. Unity字体和画面花屏处理

    字体花屏和相机渲染花屏,这两者的表现有明显的差异. 字体花屏 字体花屏是持续性的,直到组件被刷新,或字体图集被刷新.目前在我们项目中当游戏启动时,就会填充游戏用到的所有字符到贴图中,所以并没有遇到此问 ...

  8. CE修改器入门：寻找指针基址

    上一步阐述了如何使用代码替换功能对付变化位置的数据地址,但这种方法往往不能达到预期的效果,所以我们需要学习如何利用指针,在本关的 Tutorial.exe 窗口下面有两个按钮,一个会改变数值,另一个不 ...

  9. intel更新13代桌面处理器产品线，更多核心更贵价格

    intel 13代酷睿产品线更新带来了更多低于125w TDP的处理器.intel确认了10个65wTDP的SKU和6个35wTDP的SKU.13代酷睿包含新的Raptor Lake和旧的Alder ...

  10. 揭秘C语言的心脏：深入探索指针与数组的奥秘

    欢迎大家来到贝蒂大讲堂 养成好习惯,先赞后看哦~ 所属专栏:C语言学习 贝蒂的主页:Betty's blog 1. strlen()和sizeof的区别 名称 区别 sizeof 1. sizeof是 ...