<!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. codeforces 892E（离散化+可撤销并查集）

    题意 给出一个n个点m条边的无向联通图(n,m<=5e5),有q(q<=5e5)个询问 每个询问询问一个边集{Ei},回答这些边能否在同一个最小生成树中 分析 要知道一个性质,就是权值不同 ...

  2. springboot使用过程中遇到的问题

    一.工具Intellij IDEA 二.基本问题 1.数据库语句 Caused by: java.lang.IllegalStateException: Cannot load driver clas ...

  3. Oracle冷备和热备脚本

    Oracle冷备和热备脚本 冷备脚本: set feedback off set heading off set verify  off set trimspool off set echo off ...

  4. 微信小程序实战之 goods（订餐页）

    项目目录: 模拟数据: utils / data.js function getSData() { var data = [ { "name": "热销榜", ...

  5. 设计模式 之代理(Proxy)模式

    为什么这里要定义代理呢?所谓代理代理,当然就是你不想做的事.找别人去做,这就是代理.所以,当你写代码的时候.你想保持类的简单性.重用性.你就能够把事件尽量都交给其他类去做.自己仅仅管做好自己的事.也就 ...

  6. JAVA学习第六十四课 — 反射机制

       Java反射机制是在执行状态中,对于随意一个类,都可以知道这个类的全部属性和方法,对于随意一个对象,都可以调用它的随意一个方法和属性,这样的动态获取的信息以及动态调用对象的方法的功能称为java ...

  7. Android学习 多读官网，故意健康---手势

    官网地址 ttp://developer.android.com/training/gestures/detector.html: 一.能够直接覆盖Activity的onTouch方法 public ...

  8. dotnet new 命令

    如果想知道这个命令的详细用法,可以在打完命令之后,在输入一个" --help"即可 $ dotnet new --help.NET Initializer Usage: dotne ...

  9. Wiz笔记发布博客工具无法获取分类修复

    使用Wiz笔记可以很方便的将笔记发布到博客,而且支持markdwon书写,并且可以很方便的通过复制粘贴来插入图片. 用法:http://blog.wiz.cn/wiz-plugin-blog-writ ...

  10. Android 常用Shell命令

    1.查询模拟器/设备实例 adb devices 2.从模拟器/设备中拷入或拷出文件(默认拷贝在执行目录) 从模拟器或者设备中复制文件或目录,使用(如下命): adb pull <remote& ...