<!DOCTYPE html>

 <html>

  <head>

   <meta charset='utf-8'>

   <title>js typing</title>

  </head>

  <body>

   <div id='divTyping'></div>

   <script>

    var str = 'js 实现的 打字效果，感觉蛮有趣的。';

    var i = 0;

    function typing(){

     var divTyping = document.getElementById('divTyping');

     if (i <= str.length) {

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

      setTimeout('typing()', 200);//递归调用

     }

     else{

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

     }

    }

    typing();

   </script>

  </body>

 </html>

代码很容易懂，原来也没有想象的那么难

js实现打字效果的更多相关文章

  1. html + css 实现无需 js 的打字效果

    以前要达到类似在电脑上打字的效果,需要 js+html.今天我将介绍一种新方法.本文主要介绍纯 html+css 实现打字效果,有一定的参考价值,大家可以学习一下.提供所有代码,可以直接使用. 一.原 ...

  2. 5行代码带你实现一个js的打字效果

    (转载)原文链接:https://juejin.im/post/5ddf55835188257313541581 前言 有次看电影

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

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

  4. JS让网页上文字出现键盘打字的打字效果

    一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html ...

  5. 最牛的打字效果JS插件 typing.js

    最新在做公司的一个项目,需要实现一个敲打代码的动画效果,粗意味比较简单,果断自己直接开写,写着写着发现是一个坑.需要支持语法高亮,并不能直接简单的用setTimeout来动态附件innerHTML.苦 ...

  6. CSS 实现打字效果

    JS实现 最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞 <div class="element"> ...

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

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

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

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

  9. 基于jQuery标题有打字效果的焦点图

    给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...

随机推荐

  1. Spring4MVC 请求参数映射和Content-type

    目录 前言 不使用注解(不传则为null) 基本数据类型和日期类型 自定义类型POJO @PathVariable注解 @RequestParam 注解 @RequestBody注解 复杂对象Arra ...

  2. linux命名详解及其软件安装实例

    始于cd,ls命令 好啦,步入正题,我使用的linux连接工具为xshell,mRemoteNG,对两款工具不做介绍啦,你可以百度一下,实在不会入左上方群. 进入之后,便是上面的界面黑乎乎一片,对于初 ...

  3. [转] Oracle数据库维护常用SQL语句集合

           原文地址 进程相关: 1. 求当前会话的SID,SERIAL# SELECT Sid, Serial# FROM V$session WHERE Audsid = Sys_Context ...

  4. iOS中3种正则表达式的使用

    1.利用NSPredicate(谓词)匹配 例如匹配有效邮箱: ? 1 2 3 4 NSString *email ＝ @“nijino_saki@163.com”:  NSString *regex ...

  5. 使用7zip压解各种文件的经常使用命令

    7zip简单介绍 格式支持 压缩解压缩 仅支持解压缩 安装 Debian Ubuntu ArchLinux 使用 打包 解压 列出文件的信息列表 检查包的完整性 更新压缩包 删除包里的文件 7zip简 ...

  6. Linux —— 压缩文件

    Linux——压缩文件 为什么需要压缩文件?    文件在传输过程中,可能由于文件过大,传输所需时间过多.减少文件大小有两个明显的好处,一是可以减    少存储空间,二是通过网络传输文件时,可以减少传 ...

  7. mysql最新版中文参考手册在线浏览

    MySQL是最流行的开放源码SQL数据库管理系统,具有快速.可靠和易于使用的特点.同时MySQL也是一种关联数据库管理系统,具有很高的响应速度和灵活性.又因为mysql拥有良好的连通性.速度和安全性, ...

  8. gvoory脚本中关于HttpClient使用详解实例

    一.gvoory脚本中关于HttpClient使用详解实例 HttpClient:是一个接口 首先需要先创建一个DefaultHttpClient的实例 HttpClient httpClient=n ...

  9. OpenGL的版本号历史和发展

    来源请注明.本文永久地址为http://www.cnblogs.com/vertexshader/articles/2917540.html OpenGL®作为业界最为广泛使用的2D和3D图形接口标准 ...

  10. Windows的MAX_PATH

    MAX_PATH的解释: 文件名最长256(ANSI),加上盘符(X:\)3字节,259字节,再加上结束符1字节,共260http://msdn.microsoft.com/en-us/library ...