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的并行运算实现代码
Nov 19 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
JS实现div居中示例
Apr 17 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
three.js实现圆柱体
Dec 30 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
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
为你总结一些php信息函数
2015/10/21 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
Python中encode()方法的使用简介
2015/05/18 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
python Gabor滤波器讲解
2020/10/26 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
客户代表自我评价范例
2013/09/24 职场文书
自荐信的五个重要部分
2013/10/29 职场文书
物流专业大学应届生求职信
2013/11/03 职场文书
舞蹈教育学专业推荐信
2013/11/27 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang