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 相关文章推荐
JavaScript 继承详解(一)
Jul 13 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
php实现上传图片文件代码
2015/07/19 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
Python编写登陆接口的方法
2017/07/10 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
应聘编辑职位自荐信范文
2014/01/05 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
高中生操行评语大全
2014/04/25 职场文书
保护环境建议书300字
2014/05/13 职场文书
给客户的感谢信
2015/01/21 职场文书
田径运动会广播稿
2015/08/19 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书