<!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. 2018 11.2 PION模拟赛

    期望:100 + 50 + 30 = 180 实际:0 + 50 + 30 =80 期望:100   实际:0 数值有负数,边界应该设为-0x7f       此处 gg /* 期望的分:50+ */ ...

  2. Spring MVC静态资源实例

    以下内容引用自http://wiki.jikexueyuan.com/project/spring/mvc-framework/spring-static-pages-example.html: 例子 ...

  3. 使用datatables实现后台分页功能，减轻前端渲染压力

    注意不同版本,参数名字及参数内容存在差异,具体可以参考https://datatables.net/upgrade/1.10-convert#Options 控制页面显示的参数:https://dat ...

  4. iOS远程推送原理

    远程推送 就是从远程server推送消息给client的通知.当然须要联网. 远程推送服务APNs (Apple Push NotificationServices) 为什么须要远程推送通知? 传统获 ...

  5. 单点登录cas常见问题(二) - 子系统是否会频繁訪问cas中心？

    这个问题的完整描写叙述是:用户成功登陆后.在訪问子系统的受限资源时,还须要訪问cas中心么,即子系统是否还会频繁訪问cas中心.cas中心会不会压力太大? 答案是:不会. 假设用户通过子系统A登录了c ...

  6. 【OpenGL】Shader实例分析（七）- 雪花飘落效果

    转发请保持地址:http://blog.csdn.net/stalendp/article/details/40624603 研究了一个雪花飘落效果.感觉挺不错的.分享给大家,效果例如以下: 代码例如 ...

  7. http协议的相关知识

    因为如今的工作设计的Web开发,因此了解了一下Http协议.在阅读了这篇文章HTTP协议具体解释(真的非常经典)后,总结了相关经常使用知识并列在此处以方便以后的查询. HTTP协议的主要特点可概括例如 ...

  8. 大数据处理之道 （htmlparser获取数据&lt;一&gt;）

    一:简单介绍 (1)HTML Parser是一个用于解析Html的Java的库.可採用线性或嵌套两种方式.主要用于网页的转换或提取,他有一些特性:过滤器filter,遍历器visitors,通常的标签 ...

  9. CocoaPoda在iOS开发中的使用

    CocoaPoda在iOS开发中的使用 CocoaPods 简介 CocoaPods是iOS开发中不可避免的依赖管理第三方的工具,能简化一些第三方库文件需要添加编译参数及依赖库的繁复工作 CocoaP ...

  10. BZOJ1087=Codevs2451=洛谷P1896&P2326互不侵犯

    1087: [SCOI2005]互不侵犯King Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2885  Solved: 1693[Submit][ ...