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 相关文章推荐
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
封装属于自己的JS组件
Jan 27 Javascript
layui table 参数设置方法
Aug 14 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
vue中watch和computed的区别与使用方法
Aug 23 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 GD库生成图像的几个函数总结
2014/11/19 PHP
php图像处理类实例
2015/07/28 PHP
PHP实现小偷程序实例
2016/10/31 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
javascript中常用编程知识
2013/04/08 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
python交互式图形编程实例(三)
2017/11/17 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
印度低票价航空公司:GoAir
2017/10/11 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
房屋买卖委托公证书
2014/04/08 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
详解Python牛顿插值法
2021/05/11 Python
ES6 解构赋值的原理及运用
2021/05/25 Javascript
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏