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获取scrollHeight问题想到的标准问题
May 27 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
Angular实现响应式表单
Aug 04 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 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
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
Python爬豆瓣电影实例
2018/02/23 Python
django rest framework 自定义返回方式
2020/07/12 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
中软国际Java程序员笔试题
2014/07/19 面试题
公务员职务工作的自我评价
2013/11/01 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
大学生创业计划书
2019/06/24 职场文书
在js中修改html body的样式
2021/11/11 Javascript
JavaScript前端面试组合函数
2022/06/21 Javascript
MySQL添加索引特点及优化问题
2022/07/23 MySQL
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers