废话不多说，上代码~~

<!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. 【Java并发工具类】ReadWriteLock

    前言 前面介绍过ReentrantLock,它实现的是一种标准的互斥锁:每次最多只有一个线程能持有ReentrantLock.这是一种强硬的加锁规则,在某些场景下会限制并发性导致不必要的抑制性能.互斥 ...

  2. Navicat Premium 12（破解版免安装）

    获取安装包解压至任意位置 切勿更新!!! 切勿更新!!! 切勿更新!!! 扫下方二维码关注公众号回复:navicat12即可获取

  3. 单线程的REDIS为什么这么快？

    REDIS是单线程处理所有请求,和一般经典实际上推荐的方式相反,那么单线程串行处理,为什么依然能够做到很快呢?知乎上的一个答案如下,其中线程切换和锁不是性能主要影响因素的观点和一般的答案都不同: 作者 ...

  4. Java范型学习笔记

    对于范型的使用或者说印象只有集合,其他地方即使使用过也不知道,反正就是只停留在List<E> Map<K, V>,最近刚好闲来无事,就找找资料学习一下:下列为个人学习总结,欢迎 ...

  5. Mysql 删除从数据库的relay logs最佳方式、最安全方式

    情景 MySQL数据库主从复制在默认情况下从库的relay logs会在SQL线程执行完毕后被自动删除.但是:在relay_log_purge = 0和MHA集群下,不会被自动删除,需要手动删除.如何 ...

  6. Javase-坦克大战小游戏，为什么会出现上方向和左方向的子弹不能发射的情况？检查了好久，有大佬帮帮忙吗，小白睡不着

    //为什么会出现上方向和左方向的子弹不能发射的情况?检查了好久,有大佬帮帮忙吗,小白睡不着 package TanKe.lbl;import java.awt.*;import java.awt.ev ...

  7. 我不知道的js（一）作用域与闭包

    作用域与闭包 作用域 什么是作用域 作用域就是一套规则,它负责解决(1)将变量存在哪儿?(2)如何找到变量?的问题 作用域工作的前提 谁赋予了作用域的权利?--js引擎 传统编译语言编译的过程 分词/ ...

  8. linux文件系统相关命令(df/du/fsck/dumpe2fs)

    一.文件系统查看命令df 格式 df [选项] [挂载点] 选项 名称 作用 -a 显示所有的文件系统信息,包括特殊文件系统,如/proc,/sysfs -h 使用习惯单位显示容量,如KB,MB或GB ...

  9. 新手必看：PyCharm安装教程，Python开发者的有力工具

    PyCharm是由JetBrains打造的一款Python IDE,VS2010的重构插件Resharper就是出自JetBrains之手. 同时支持Google App Engine,PyCharm ...

  10. Valiant Hearts： The Great War -- 《勇敢的心》

    “友情,爱情,亲情”