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开发时的五个注意事项
Dec 08 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
js格式化时间的简单实例
Nov 27 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 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
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
Bootstrap插件全集
2016/07/18 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python 公共方法汇总解析
2019/09/16 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
维也纳通行证:Vienna PASS
2019/07/18 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
回门宴答谢词
2014/01/13 职场文书
便利店的创业计划书
2014/01/15 职场文书
财产保全担保书范文
2014/04/01 职场文书
体育教师求职信
2014/06/30 职场文书
农业项目建议书
2014/08/25 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
关于远足的感想
2015/08/10 职场文书
《包身工》教学反思
2016/02/23 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
python运算符之与用户交互
2022/04/13 Python