JavaScript模拟实现键盘打字效果


Posted in Javascript onJune 29, 2015
$(function () {
 
 
      var input_type = {
        init:function ($obj) {
          this.name = $obj.html().split("")
          this.length = this.name.length;
          this.i = 0;
        },
        pri:function () {
          var $this = this
          //在此处只能使用闭包,因为windown.settimeout使函数的this指向object windown,而非原型链的this对象。而此时我需要递归,所以只能将this对象传到闭包内,递归匿名的闭包函数。
          return (function () {
            if ($this.i > $this.length) {
              window.clearTimeout(Go)
              return false;
            }
            var char = $this.name
            $(".div1").append(char[$this.i])
            $this.i++
            var Go = window.setTimeout(arguments.callee, 100)//在这里arguments.callee妙用因为是匿名闭包,调用函数本身。
          })
        }
      }
 
 
//建立class类
      function Input_type() {
        this.init.apply(this, arguments)
      }
 
      Input_type.prototype = input_type
 
//创建实例
      var p = new Input_type($(".content"))
      p.pri()()
 
    });

总结:为了实现每次循环间隔时间,用window.settimeout递归的写法。 因为想用原型链封装,this冲突,所以递归调用匿名的闭包函数。用arguments.callee表示匿名函数。

HTML代码:

<button id="pri">pri</button>
<div class="content" style="display: none;">
  我与父亲不相见已二年余了,我最不能忘记的是他的背影。那年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子,我从北京到徐州,打算跟着父亲奔丧回家。到徐州见着父亲,看见满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪。父亲说,“事已如此,不必难过,好在天无绝人之路!”
  
回家变卖典质,父亲还了亏空;又借钱办了丧事。这些日子,家中光景很是惨淡,一半为了丧事,一半为了父亲赋闲。丧事完毕,父亲要到南京谋事,我也要回北京念书,我们便同行。
  
到南京时,有朋友约去游逛,勾留了一日;第二日上午便须渡江到浦口,下午上车北去。父亲因为事忙,本已说定不送我,叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房,甚是仔细。但他终于不放心,怕茶房不妥帖;颇踌躇了一会。其实我那年已二十岁,北京已来往过两三次,是没有甚么要紧的了。他踌躇了一会,终于决定还是自己送我去。我两三回劝他不必去;他只说,“不要紧,他们去不好!”
  
我们过了江,进了车站。我买票,他忙着照看行李。行李太多了,得向脚夫行些小费,才可过去。他便又忙着和他们讲价钱。我那时真是聪明过分,总觉他说话不大漂亮,非自己插嘴不可。但他终于讲定了价钱;就送我上车。他给我拣定了靠车门的一张椅子;我将他给我做的紫毛大衣铺好坐位。他嘱我路上小心,夜里警醒些,不要受凉。又嘱托茶房好好照应我。我心里暗笑他的迂;他们只认得钱,托他们直是白托!而且我这样大年纪的人,难道还不能料理自己么?唉,我现在想想,那时真是太聪明了!
  
我说道,“爸爸,你走吧。”他望车外看了看,说,“我买几个橘子去。你就在此地,不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台,须穿过铁道,须跳下去又爬上去。父亲是一个胖子,走过去自然要费事些。我本来要去的,他不肯,只好让他去。我看见他戴着黑布小帽,穿着黑布大马褂,深青布棉袍,蹒跚地走到铁道边,慢慢探身下去,尚不大难。可是他穿过铁道,要爬上那边月台,就不容易了。他用两手攀着上面,两脚再向上缩;他肥胖的身子向左微倾,显出努力的样子。这时我看见他的背影,我的泪很快地流下来了。我赶紧拭干了泪,怕他看见,也怕别人看见。我再向外看时,他已抱了朱红的橘子望回走了。过铁道时,他先将橘子散放在地上,自己慢慢爬下,再抱起橘子走。到这边时,我赶紧去搀他。他和我走到车上,将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土,心里很轻松似的,过一会说,“我走了;到那边来信!”我望着他走出去。他走了几步,回过头看见我,说,“进去吧,里边没人。”等他的背影混入来来往往的人里,再找不着了,我便进来坐下,我的眼泪又来了。
  
近几年来,父亲和我都是东奔西走,家中光景是一日不如一日。他少年出外谋生,独力支持,做了许多大事。那知老境却如此颓唐!他触目伤怀,自然情不能自已。情郁于中,自然要发之于外;家庭琐屑便往往触他之怒。他待我渐渐不同往日。但最近两年的不见,他终于忘却我的不好,只是惦记着我,惦记着我的儿子。我北来后,他写了一信给我,信中说道,“我身体平安,惟膀子疼痛利害,举箸提笔,诸多不便,大约大去之期不远矣。”我读到此处,在晶莹的泪光中,又看见那肥胖的,青布棉袍,黑布马褂的背影。唉!我不知何时再能与他相见!
</div>
<div class="div1">

</div>
Javascript 相关文章推荐
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
JavaScript实现把数字转换成中文
Jun 29 #Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 #Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 #Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 #Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 #Javascript
JavaScript实现数组随机排序的方法
Jun 26 #Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 #Javascript
You might like
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
PHP+DBM的同学录程序(5)
2006/10/09 PHP
php 随机生成10位字符代码
2009/03/26 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
vue实现通讯录功能
2018/07/14 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
用Python生成器实现微线程编程的教程
2015/04/13 Python
简单介绍Python中的try和finally和with方法
2015/05/05 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
pytest中文文档之编写断言
2019/09/12 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
《陋室铭》教学反思
2014/02/26 职场文书
2014年销售工作总结
2014/12/01 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript