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(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
jquery 笔记 事件
Nov 02 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
JS实现评价的星星功能
Aug 20 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
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
怎么使 Mysql 数据同步
2006/10/09 PHP
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
Javascript学习笔记1 数据类型
2010/01/11 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
Python遍历指定文件及文件夹的方法
2015/05/09 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
numpy.array 操作使用简单总结
2019/11/08 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
python中round函数如何使用
2020/06/19 Python
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
优秀实习自我鉴定
2013/12/04 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
大学军训通讯稿
2015/07/18 职场文书
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android