原理

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

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. [转帖]Jmeter学习笔记（二十一）——Concurrency Thread Group阶梯式加压测试

    https://www.cnblogs.com/pachongshangdexuebi/p/11739064.html 一.先安装jmeter的插件管理工具 1.下载地址:jmeter-plugins ...

  2. [转帖]Linux之系统参数overcommit_memory

    https://www.modb.pro/db/25980 前言:作为DBA,内存的使用情况是重要的监控指标之一,了解内存使用很重要.下面有一个系统参数,对于内存的调用起到重要的作用.大家可以了解一下 ...

  3. 混沌测试平台 Chaos Mesh

    混沌测试平台 Chaos Mesh Chaos Mesh 是PingCap团队研发的一款用于测试kubernetes环境的工具.通过人为地在集群中注入故障来检测集群对故障的处理以及恢复能力.更详细信息 ...

  4. 【JS 逆向百例】网洛者反爬练习平台第五题：控制台反调试

    关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后 ...

  5. windwos10-11打开任意文件弹出警告

    如下打开exe或者视频.图片都弹出警告 解决方案输入快捷键win+s换出搜索框 输入Internet 选项 进入安全选项点击自定义级别 找到,加载应用程序和不安全文件 勾选启用(不安全) 然后确定-在 ...

  6. 基于.Net Core3.1 MVC + EF Core的项目（一）框架的初步搭建

    项目暂时分为六大块,结构如图所示 代码地址是  https://github.com/hudean/VacantCloud-   里面有许多没有完成,不过一些大致的内容都写的差不多了,权限认证依赖注入 ...

  7. 微信小程序-页面跳转wxAPI

    官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html wx.navigateTo(O ...

  8. 5.7 Windows驱动开发：取进程模块函数地址

    在笔者上一篇文章<内核取应用层模块基地址>中简单为大家介绍了如何通过遍历PLIST_ENTRY32链表的方式获取到32位应用程序中特定模块的基地址,由于是入门系列所以并没有封装实现太过于通 ...

  9. Rsync+Inotify 实现数据同步

    Rsync 是UNIX及类UNIX-Like平台下一款强大的数据镜像备份软件,它不像FTP或其他文件传输服务那样需要进行全备份,Rsync 可以根据数据的变化进行差异备份,从而减少数据流量,提高工作效 ...

  10. GDB调试程序 [补档-2023-07-19]

    gdb调试 ​ 它是gcc的调试工具,调试工具都能干什么就不多说了. 7-1生成调试信息 ​ 在使用gcc编译c/c++的程序时,需要在编译命令中加入 -g 这一参数,它可以为你显示函数名,变量名 等 ...