废话不多说，上代码~~

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

	<div id="text"></div>

</body>

<script>

  let divTyping = document.getElementById('text')

  let i = 0,

    timer = 0,

    str = '用JS实现动态打字效果'

  function typing () {

    if (i <= str.length) {

      divTyping.innerHTML = str.slice(0, i++) + '_'

      timer = setTimeout(typing, 200)

    }

    else {

      divTyping.innerHTML = str//结束打字,移除 _ 光标

      clearTimeout(timer)

    }

  }

  typing()

</script>

</html>

　　

JavaScript实现动态打字效果的更多相关文章

  1. 最近比较迷flash professional cc 做PPT，做一个flash做动态打字效果的教程

    想做一个flash打字效果.网上的方法要不是太繁琐,要不然就是各种遗漏.在这边做一个行之有效的flash做打字效果教程. 首先我用的是最新版本的flash professional cc .但是应该和 ...

  2. JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

  3. Javascript实现打字效果

    伤感的 学期末 今天是这学期的最后一天,考完了最后一门数学,明天我们就要各自为自己的暑假打算打算了,所以趁着大家还没走一起出去打了打篮球,玩了玩轮滑,很累但是很开心,最大的感触莫过于忧伤额,明年我或许 ...

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

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

  5. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  6. JavaScript DOM动态创建（声明）Object元素

    http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...

  7. 理解Javascript的动态语言特性

    原文:理解Javascript的动态语言特性 理解Javascript的动态语言特性 Javascript是一种解释性语言,而并非编译性,它不能编译成二进制文件. 理解动态执行与闭包的概念 动态执行: ...

  8. JavaScript实现的购物车效果-效果好友列表

    JavaScript实现的购物车效果.当然,可以在许多地方使用这种效果.朋友的.例如,在选择.人力资源模块,工资的计算,人才选拔等..下面来看一下班似有些车效果图: watermark/2/text/ ...

  9. canvas打字效果

    运用fillText,写的打字效果. 唯一麻烦的地方是,换行问题, 我是把字符串转化为数组,数组一个单位完成,就换行,继续下一个单位. <!doctype html> <html&g ...

随机推荐

  1. 超长可视化指南！带你理清K8S部署的故障排查思路，让bug无处遁形

    本文将帮助你厘清在Kubernetes中调试 deployment的思路.下图是完整的故障排查思路,如果你想获得更清晰的图片,请在公众号后台(RancherLabs)回复"troublesh ...

  2. Spark RDD基本概念、宽窄依赖、转换行为操作

    目录 RDD概述 RDD的内部代码 案例 小总结 转换.行动算子 宽.窄依赖 Reference 本文介绍一下rdd的基本属性概念.rdd的转换/行动操作.rdd的宽/窄依赖. RDD:Resilie ...

  3. 【机器学习】算法原理详细推导与实现(六):k-means算法

    [机器学习]算法原理详细推导与实现(六):k-means算法 之前几个章节都是介绍有监督学习,这个章解介绍无监督学习,这是一个被称为k-means的聚类算法,也叫做k均值聚类算法. 聚类算法 在讲监督 ...

  4. Enum, Generic and Templates

    文 Akisann@CNblogs / zhaihj@Github 本篇文章同时发布在Github上:https://zhaihj.github.io/enum-generic-and-templat ...

  5. 虚拟机ubuntu的网络连接类型

    图很好 https://jingyan.baidu.com/article/91f5db1b17e8a01c7f05e3e6.html 很详细,有实例 https://www.cnblogs.com/ ...

  6. 接口测试:http状态码

    http状态码 每发出一个http请求之后,都会有一个响应,http本身会有一个状态码,来标示这个请求是否成功,常见的状态码有以下几种:1.200 2开头的都表示这个请求发送成功,最常见的就是200, ...

  7. logstash 安装 配置

    1.Logstash 安装:在产生日志的服务器上安装 Logstash1.安装java环境 # yum install java-1.8.0-openjdk.x86_642.安装logstash(使用 ...

  8. 国产安全自主可控IT智能运维管理解决方案

    新一轮科技革命和产业变革席卷全球,大数据.云计算.物联网.人工智能.区块链等新技术不断涌现,数字经济正深刻地改变着人类的生产和生活方式,作为经济增长新动能的作用日益凸显.伴随增长的,还有网络中不断涌现 ...

  9. java架构之路-（dubbo专题）dubbo的基本使用

    今天我们来说一下dubbo的基本使用,没有什么高阶的知识,真的超级简单易懂. Dubbo核心功能解释 dubbo 阿里开源的一个SOA服务治理框架,从目前来看把它称作是一个RPC远程调用框架更为贴切. ...

  10. 数组翻转（非reverse）

    var arr = [1,2,3,4]; var arr2 = []; while(arr.length) { var num = arr.pop(); //删除数组最后一个元素并返回被删除的元素 a ...