<!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. hdu6080(最小环)

    题目 http://acm.hdu.edu.cn/showproblem.php?pid=6080 分析 很妙的思路,将里面的点集当作A,将外面的点集当作B 然后O(n^2)枚举两两B点,设一个是u, ...

  2. Java面试题总结(一)---Java基础

    Java面试题总结(一)---Java基础 1.面向对象的特征有哪些? 答:面向对象的特征主要有以下几个: 1)抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方 ...

  3. JDBC调用存储过程，进参出参

    今天做了一个数据表拷贝的功能,用到了存储过程,就写了一个java中用jdbc调用存储过程的代码,成功的实现了功能,晚上跑回家记录下 Connection conn = ConnectionUtil.g ...

  4. Failed to execute 'toDataURL' on 'HTMLCanvasElement,在canvas.toDataURL()执行时候报错解决方案

    添加跨域条件   crossorigin="anonymous" [Redirect at origin 'http://xxx.xx.com' has been blocked ...

  5. 如何利用Fluxion诱惑目标用户获取WPA密码

      前言 由于ISP替代了易受攻击的路由器,供渗透测试人员选择的诸如Reaver这样的工具越来越少,对于特定的目标,哪些工具有用与否能够确定的也很少.而如果采用暴力破解WPA密码,可能会需要大量的时间 ...

  6. 深入理解 C 指针阅读笔记 -- 第六章

    Chapter6.h #ifndef __CHAPTER_6_ #define __CHAPTER_6_ /*<深入理解C指针>学习笔记 -- 第六章*/ typedef struct _ ...

  7. SQL 主机

    SQL 主机 SQL 主机 如果您想要您的网站存储数据在数据库并从数据库显示数据,您的 Web 服务器必须能使用 SQL 语言访问数据库系统. 如果您的 Web 服务器托管在互联网服务提供商(ISP, ...

  8. 嵌入式驱动开发之---dm8127 中sensor 驱动的改变

    #IPNC_DEVICE := DM385IPNC_DEVICE := DM812x # Values are "LOW_POWER" and "FULL_FEATURE ...

  9. Eclipse添加Qt插件

    此文件仅为步骤操作作一个记录,以便以后方便查阅. 1.操作大体参考这个网站:http://blog.csdn.net/defonds/article/details/5013412 2.我的运行环境: ...

  10. C#温度报警

    using System; using System.Collections.Generic; using System.Text; using System.Collections; using S ...