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 相关文章推荐
jQuery 操作option的实现代码
Mar 03 Javascript
Javascript事件实例详解
Nov 06 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
vue ssr 指南详读
Jun 29 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
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
在Windows版的PHP中使用ADO
2006/10/09 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
JSON.stringify 语法实例讲解
2012/03/14 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
python3 简单实现组合设计模式
2020/07/02 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
党员违纪检讨书
2014/02/18 职场文书
本科毕业生自荐信
2014/05/26 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
个人思想政治总结
2015/03/05 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
用Python可视化新冠疫情数据
2022/01/18 Python
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏