废话不多说，上代码~~

<!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. 根据navigator.userAgent返回值识别 浏览器

    function validBrowser(){ var u_agent = navigator.userAgent; var browser_name='Failed to identify the ...

  2. 五种编程语言解释数据结构与算法——顺序表1（理论与C语言实现）

    1.线性表的分类 2.线性表的定义及其基本操作 2.1.定义:线性表是具有相同类型的n(n>=0)个元素的有序序列,其中n为表长,当n=0时,该表为空表. 2.3.线性表的逻辑结构为: 2.4. ...

  3. Linux学习1-云服务器上搭建禅道项目管理工具

    前言 相信各位测试的小伙伴出去面试总会被问到:测试环境怎么搭建?一个中级测试工程师还是对测试环境一无所知的话,面试官会一脸鄙视的,今天我给大家介绍一下最简单的环境部署-—如何在云服务器部署禅道环境. ...

  4. [redis读书笔记] 第二部分 单机数据库 数据库实现

    一 数据库基本实现/命令下发的实现 redis.c里,大家能看到redisCommandTable[] 的实现,列出了支持的所有命令.大部分的入参为redisClient *c,当一条REDIS命令下 ...

  5. ubuntu 配置网卡,DNS, iptables

    # 配置静态ip地址 root@simon:~# vim /etc/network/interfaces auto enp4s0 iface enp4s0 inet static address 19 ...

  6. python 解压、复制、删除 文件

    一.python3解压文件 1.python 解压文件代码示例 如下代码主要实现zip.rar.tar.tar.gz四种格式的压缩文件的解压 def unzip_file(src_file, dst_ ...

  7. go每日新闻--2020-02-27

    go 语言中文网(每日资讯)_2020-02-27 一.Go 语言中文网 如何正确看待 Google 宣布 Fuchsia 操作系统没有选 Go 作为终端开发语言 Actor 还是 CSP?Go 中的 ...

  8. win10上使用linux命令

    (1)可以用windows自带的powershell,但是 ll,vim等命令不能使用 (2)Windows更新==>针对开发人员==>开启开发人员模式,然后在控制面板==>程序与功 ...

  9. Java高级项目实战02：客户关系管理系统CRM系统模块分析与介绍

    本文承接上一篇:Java高级项目实战之CRM系统01:CRM系统概念和分类.企业项目开发流程 先来CRM系统结构图: 每个模块作用介绍如下: 1.营销管理 营销机会管理:针对企业中客户的质询需求所建立 ...

  10. js this是什么?[多次书写]

    前言 以前的时候,我写了一个关于js this的博客,写的非常复杂,分析了各种情况. 现在我想简化. 如果你有后台基础,专门去理解过this,那么请忘记. 这东西是有口诀的: 在方法中,this 表示 ...