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


Posted in Javascript onMarch 10, 2017

本文实例讲述了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>

运行效果图如下:

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

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

Javascript 相关文章推荐
JS Array对象入门分析
Oct 30 Javascript
Javascript attachEvent传递参数的办法
Dec 14 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
JS正则表达式验证中文字符
May 08 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
Vue路由权限控制解析
Nov 09 Javascript
jquery实现的table排序功能示例
Mar 10 #Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 #Javascript
常用的js方法合集
Mar 10 #Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 #Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 #Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 #Javascript
js实现产品缩略图效果
Mar 10 #Javascript
You might like
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
学习vue.js计算属性
2016/12/03 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
Python易忽视知识点小结
2015/05/25 Python
Python类的用法实例浅析
2015/05/27 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
python进行文件对比的方法
2018/12/24 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
运动会通讯稿500字
2014/02/20 职场文书
保证书范文大全
2014/04/28 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
七个非常实用的Python工具包总结
2021/06/15 Python