原理

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

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. [转帖]从SSTable到LSM-Tree之二

    https://zhuanlan.zhihu.com/p/103968892 背景 LSM-Tree (Log Structured Merge Tree),日志结构合并树.它在 1996 年由论文& ...

  2. [转帖]如何对minio进行性能测试和分析

    https://developer.aliyun.com/article/1006775   环境详情 server(组成集群,ec为12:4) ip hosts 硬盘 storage01 172.1 ...

  3. [转帖]Rust在windows下安装以后cargo build Error: linker `link.exe` not found

    D:\rust\runoob-greeting\greeting>cargo build error: linker `link.exe` not found | = note: 系统找不到指定 ...

  4. [转帖]CentOS7上systemctl的使用

    https://www.cnblogs.com/yeyuzhuanjia/p/14676182.html CentOS 7.x开始,CentOS开始使用systemd服务来代替daemon,原来管理系 ...

  5. ARM下KVM虚拟化的损耗验证--redis

    ARM下KVM虚拟化的损耗验证 摘要 看Windows 上面的 Workstation的虚拟机的 网络层的延迟特别高. 突然想之前统计都是直接在本地验证的, 只考虑了虚拟化CPU的性能损耗 没有考虑虚 ...

  6. [转帖]Linux如何查看网关地址

      转至:https://baijiahao.baidu.com/s?id=1733537078943023051&wfr=spider&for=pc 服务器之间的通信是通过ip地址来 ...

  7. vue render函数的简单使用（1）

    1.render函数的介绍 在vue中我们经常使用HTML模板语法来组建页面. 除此之外,使用还可以使用render函数来创建页面. 因为vue是虚拟DOM,拿到template模板时也要转译成VNo ...

  8. Midjourney|文心一格 Prompt：完整参数列表、风格汇总、文生图词典合集

    Midjourney|文心一格 Prompt:完整参数列表.风格汇总.文生图词典合集 1.Midjourney 完整参数列表 参数名称 调用方法 使用案例 注意事项 V5 V4 V3 niji 版本 ...

  9. 驱动开发：如何枚举所有SSDT表地址

    在前面的博文<驱动开发:Win10内核枚举SSDT表基址>中已经教大家如何寻找SSDT表基地址了,找到后我们可根据序号获取到指定SSDT函数的原始地址,而如果需要输出所有SSDT表信息,则 ...

  10. 遥感图像处理笔记之【Automatic Flood Detection from Satellite Images Using Deep Learning】

    遥感图像处理学习(7) 前言 遥感系列第7篇.遥感图像处理方向的学习者可以参考或者复刻 本文初编辑于2023年12月29日 2024年1月24日搬运至本人博客园平台 文章标题:Automatic Fl ...