<!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. 《springMVC》学习笔记

    1.SpringMVC框架 1.1 MVC在b/s系统下的应用 用户发送request请求到Controller Controller请求模型(Model)进行处理 Model将处理结果返回到Cont ...

  2. Protobuf 完整解析 - 公司最常用的数据交互协议

    Google Protocol Buffer(简称 Protobuf)是一种轻便高效的结构化数据存储格式,平台无关.语言无关.可扩展,可用于通讯协议和数据存储等领域. 数据交互xml.json.pro ...

  3. MongoDB学习day07--mongoose入门，数据库增删改查，默认参数，模块化

    一.mongoose介绍 Mongoose 是在 node.js 异步环境下对 mongodb 进行便捷操作的对象模型工具. Mongoose 是 NodeJS 的驱动, 不能作为其他语言的驱动. M ...

  4. Meteor在手机上运行

    在本章中,我们将学习如何在Android设备上运行你的应用程序.最近Meteor刚刚添加此功能适用于Windows操作系统,所以我们需要更新 Meteor 应用到 1.3测试版. 注 在写的时候本教程 ...

  5. Mybatis加入Ehcache支持

    1.Mybatis默认的缓存配置 MyBatis 包括一个很强大的查询缓存特性,它能够很方便地配置和定制. Mybatis缓存包括全局的缓存和局部的缓存.全局的缓存能够讲主配置文件的setting属性 ...

  6. 【Java 虚拟机探索之路系列】：JIT编译器

    作者:郭嘉 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells github:https://github.com/AllenWell 为 ...

  7. C++对象模型——解构语意学(第五章)

    5.4    对象的效率 (Object Efficiency) 在下面的效率測试中,对象构造和拷贝所须要的成本是以Point3d class声明为基准,从简单形式逐渐到复杂形式,包含Plain Ol ...

  8. 从CakePHP 1.3升级到2.5

    从CakePHP 1.3升级到2.5 摘要:最近把一个CakePHP 1.3的项目升级到了2.x,当然就用最新的版本2.5.3了,结果基本满意.本文记录了升级的过程,包括使用的工具,遇到的问题和相应的 ...

  9. Android ListView分页，动态添加数据

    1.ListView分页的实现,重点在于实现OnScrollListener接口,判断滑动到最后一项时,是否还有数据可以加载, 我们可以利用listView.addFootView(View v)方法 ...

  10. 2016/04/13 ①html 中各种分割线------------------------------------------ ② 控制文字显示

    ①各种分割线Html代码 1.<HR> 2.<HR align=center width=300 color=#987cb9 SIZE=1>align 线条位置(可选left. ...