废话不多说，上代码~~

<!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. meta 的作用 搜集

    Meta标签中的format-detection属性及含义   format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的forma ...

  2. drf路由分发、解析/渲染模块配置、使用admin、自动序列化配置

    目录 drf路由分发配置 解析模块配置 渲染模块配置 浏览器渲染打开 浏览器渲染关闭 结论 drf使用后台admin drf序列化模块 serializers.py: views.py:单查群查 测试 ...

  3. c++ 初始化列表和构造函数初始化区别

    先上代码 #include <iostream> class MyContruct { public: MyContruct() { std::cout << "My ...

  4. 13.深度学习(词嵌入)与自然语言处理--HanLP实现

    笔记转载于GitHub项目:https://github.com/NLP-LOVE/Introduction-NLP 13. 深度学习与自然语言处理 13.1 传统方法的局限 前面已经讲过了隐马尔可夫 ...

  5. dubbo-admin dubbo-monitor 安装

    dubbo-admin: 因为我们不能直观的看到dubbo和zk上到底有什么服务(提供者),所以我们需要一个可视化工具来方便我们管理每一个服务和每一个节点.dubbo-admin 就是dubbo的管理 ...

  6. CentOS 7中安装 MySQL 出现了 No package mysql-server available. Error: Nothing to do 错误

     CentOS 7 安装 mysql-server 爬坑  发现问题 在centos 6安装 mysql-server是直接使用命令 yum -y install mysql-server ,但是在C ...

  7. 杭电-------2045不容易系列之(3)—— LELE的RPG难题（C语言写）

    /* 当最后一个块可以和第一个块染相同颜色时,答案为:3*pow(2,n-1);但是最后一块不能和第一块颜色相同,则减去和第一 块颜色相同的染色种数即可 3*pow(2,n-1)-ranse(n-1) ...

  8. 杭电-------2032杨辉三角（C语言写）

    #include<stdio.h> ][] = { }; void init() { int i, j; ; i < ; i++) { a[i][] = ; a[i][i] = ; ...

  9. Linux安装virtualenvwrapper

    1.pip install virtualenvwrapper 2.export WORKON_HOME=/home/virtualenv  //配置虚拟环境变量,以后直接mkvirtualenv 虚 ...

  10. MySQL中的索引、左连接、右连接、join、sql执行顺序

    逻辑架构: 1.连接层 2.服务层 3.引擎层(插拔式) 4.存储层 存储引擎: 常用的有:MyISAM.InnoDB 查看命令:show variables like '%storage_engin ...