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父窗口控制只弹出一个子窗口
Apr 10 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
使用JS实现简易计算器
Jun 14 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代码维护,重构变困难的4种原因分析
2016/01/25 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
input框中的name和id的区别
2016/11/16 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
Python实现股市信息下载的方法
2015/06/15 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
python中的常量和变量代码详解
2018/07/25 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
入党自我鉴定范文
2013/10/04 职场文书
技术总监的工作职责
2013/11/13 职场文书
采购主管岗位职责
2014/02/01 职场文书
主题婚礼策划方案
2014/02/10 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
反四风对照检查材料
2014/09/22 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
初中信息技术教学计划
2015/01/22 职场文书
邀请书格式范文
2015/02/02 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
亲情作文之母爱
2019/09/25 职场文书
详解Vue的options
2021/05/15 Vue.js
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js