JS实现的自动打字效果示例

更新时间：2017年03月10日 14:09:24 作者：继续去踢波

这篇文章主要介绍了JS实现的自动打字效果,涉及javascript递归算法、字符串操作及事件函数相关使用技巧,需要的朋友可以参考下

本文实例讲述了JS实现的自动打字效果。分享给大家供大家参考，具体如下：

<!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>

运行效果图如下：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

js中arguments的用法(实例讲解)
这篇文章主要是对js中arguments的用法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
js修改table中Td的值(定义td的单击事件)
单击事件，将Td内容更新为一个Div，其中装载了一个Text，用于用户输入新的Td的值，一个确定按钮，一个取消按钮，用于保存或取消用户的输入内容
2013-01-01
JavaScript表单验证实现过程详解
表单校验是注册环节中必不可少的操作,表单校验通过一定的规则来确保用户提交数据的有效性,下面这篇文章主要给大家介绍了关于el-form表单验证的一些实用方法,需要的朋友可以参考下
2023-01-01
基于JavaScript实现大文件上传后端代码实例
这篇文章主要介绍了基于JavaScript实现大文件上传后端代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08
JS中var let声明范围区别详解
这篇文章主要为大家介绍了JS中var let声明范围区别示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
ES6 十大特性简介
这篇文章主要介绍了ES6 十大特性的相关资料，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
2020-12-12
Js鼠标跟随代码小手点击实例方法
一个跟随鼠标的小手效果，鼠标移在哪里，小手就跟着移向哪里，会出现手的效果，放在链接上的时候，手会变化，两只手很可爱哦，JS鼠标跟随代码分享与大家。
2013-05-05
JS类的定义与使用方法深入探索
这篇文章主要介绍了JS类的定义与使用方法,结合实例形式深入分析了javascript类的定义与属性、方法的调用技巧,需要的朋友可以参考下
2016-11-11
Javasript设计模式之链式调用详解
这篇文章主要为大家详细介绍了Javasript设计模式之链式调用的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-04-04
JavaScript操作DOM元素的childNodes和children区别
这篇文章主要介绍了JavaScript操作DOM元素的childNodes和children区别,本文直接给出测试代码和运行效果来讲解它们之间的区别,需要的朋友可以参考下
2015-04-04