废话不多说，上代码~~

<!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 jdk1.8 32/64位 官方绿色版下载附安装教程

    java jdk1.8 32/64位 官方绿色版下载附安装教程 地址:https://www.jb51.net/softs/691593.html

  2. Go语言实现：【剑指offer】矩阵覆盖

    该题目来源于牛客网<剑指offer>专题. 我们可以用21的小矩形横着或者竖着去覆盖更大的矩形.请问用n个21的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 先放21,则f(n ...

  3. 基于Go的马蜂窝旅游网分布式IM系统技术实践

    一.引言 即时通讯(IM)功能对于电商平台来说非常重要,特别是旅游电商. 从商品复杂性来看,一个旅游商品可能会包括用户在未来一段时间的衣.食.住.行等方方面面.从消费金额来看,往往单次消费额度较大.对 ...

  4. python学习（6）选择排序算法简单代码

    选择排序的基本思想是:每一趟在n-i+1(i=1,2,…n-1)个记录中选取关键字最小的记录作为有序序列中第i个记录.基于此思想的算法主要有简单选择排序.树型选择排序和堆排序.[1] 简单选择排序的基 ...

  5. MSSqlServer访问远程数据库

    --第一部分(要点)--永久访问方式(需对访问远程数据库进行经常性操作)时设置链接数据库Exec sp_addlinkedserver 'MyLinkServer','','SQLOLEDB','远程 ...

  6. SpringBoot基础篇-SpringBoot快速入门

    SpringBoot基础 学习目标: 能够理解Spring的优缺点 能够理解SpringBoot的特点 能够理解SpringBoot的核心功能 能够搭建SpringBoot的环境 能够完成applic ...

  7. [红日安全]Web安全Day1 - SQL注入实战攻防

    本文由红日安全成员: Aixic 编写,如有不当,还望斧正. 大家好,我们是红日安全-Web安全攻防小组.此项目是关于Web安全的系列文章分享,还包含一个HTB靶场供大家练习,我们给这个项目起了一个名 ...

  8. Android中使用Intent的Action和Data属性实现点击按钮跳转到拨打电话和发送短信

    场景 点击拨打电话按钮,跳转到拨打电话页面 点击发送短信按钮,跳转到发送短信页面 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程 ...

  9. Android中通过数组资源文件xml与适配器两种方式给ListView列表视图设置数据源

    场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改 ...

  10. PMP--1.5 项目管理描述

    项目所处的环境将影响每个项目管理过程的实施方式以及项目制约因素的优先顺序. 一. 管理一个项目的过程 ​管理一个项目通常包括(但不限于): 1. 识别项目需求 2. 处理相关方的各种需要.关注和期望 ...