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函数
Jul 21 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
跟我学习javascript的定时器
Nov 19 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 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
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
php实现socket推送技术的示例
2017/12/20 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
Three.js学习之网格
2016/08/10 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
jQuery实现frame之间互通的方法
2017/06/26 jQuery
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python实现汉诺塔递归算法经典案例
2021/03/01 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
python aiohttp的使用详解
2019/06/20 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
python列表返回重复数据的下标
2020/02/10 Python
如何理解python中数字列表
2020/05/29 Python
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
文明教师事迹材料
2014/01/16 职场文书
事业单位辞职信范文
2014/01/19 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
报关报检委托书
2014/04/08 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
python文件与路径操作神器 pathlib
2022/04/01 Python
python缺失值填充方法示例代码
2022/12/24 Python