<!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. 自定义mvc

    1. 什么是MVC MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写, 它是一种软件设计典范,用一种业务逻辑.数据. ...

  2. SpringMvc架构流程

  3. java比较两个日期大小

    方法一 /** * 比较两个日期之间的大小 * * @param d1 * @param d2 * @return 前者大于后者返回true 反之false */ public boolean com ...

  4. cf246 ENew Reform (并查集找环)

    Berland has n cities connected by m bidirectional roads. No road connects a city to itself, and each ...

  5. CSS制作翻牌特效

    应一个朋友要求替他把原本静态页面做成翻牌的特效. 主要应用了CSS3的transform,transiton.首先写好标签,一个ul下两个li元素,通过position的absolue设置两个li元素 ...

  6. Sql数据库查询语言

    1.概述 Sql是一种面向数据库的结构化查询语言.是符合美国国家标准化组织ANSI的一种计算机标准语言. Sql具对数据库的操作有:增删改查.创建数据库.创建表.创建存储过程.创建视图等 RDBMS关 ...

  7. java反射(1)

    反射反射,程序员的快乐. 第一次了解反射这个概念是从<<大话设计>>中所了解到的.当时只是对概念的模糊了解,具体对它的机制并不清楚.最近在学习并实践SSH框架,其中Spring ...

  8. UESTC 982质因子分解

    读入一个自然数,将nn分解为质因子连乘的形式输出. Input 有多组测试数据.输入的第一行是整数TT(0<T≤10000),表示测试数据的组数.每一组测试数据只有一行,包含待分解的自然数nn. ...

  9. YTU 2430: C语言习题 链表建立，插入，删除，输出

    2430: C语言习题 链表建立,插入,删除,输出 时间限制: 1 Sec  内存限制: 128 MB 提交: 576  解决: 280 题目描述 编写一个函数creatlink,用来建立一个动态链表 ...

  10. android编译openssl静态库.a

    github上有一个开源项目,已经为你编译openssl建好了工程. 地址:https://github.com/aluvalasuman/OpenSSL1.0.1cForAndroid 选择需要的版 ...