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入门基础之私有变量
Feb 23 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
JS实现拼图游戏
Jan 29 Javascript
JavaScript实现简单验证码
Aug 24 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
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
php use和include区别总结
2019/10/13 PHP
PHP之header函数详解
2021/03/02 PHP
分享20款好玩的jQuery游戏
2011/04/17 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
python制作一个桌面便签软件
2015/08/09 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
python获取array中指定元素的示例
2019/11/26 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
表彰大会主持词
2014/03/26 职场文书
节能环保口号
2014/06/12 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang