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异或加解密效果代码
Jun 25 Javascript
基于node.js的快速开发透明代理
Dec 25 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
浅谈克隆 JavaScript
Nov 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
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
解读Python编程中的命名空间与作用域
2015/10/16 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
Python 多进程原理及实现
2020/12/21 Python
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
四下基层实施方案
2014/03/28 职场文书
行政二审代理词
2015/05/25 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
Redis入门基础常用操作命令整理
2022/06/01 Redis