JavaScript模擬實(shí)現(xiàn)鍵盤打字效果
$(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 //在此處只能使用閉包,因?yàn)閣indown.settimeout使函數(shù)的this指向object windown,而非原型鏈的this對(duì)象。而此時(shí)我需要遞歸,所以只能將this對(duì)象傳到閉包內(nèi),遞歸匿名的閉包函數(shù)。 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妙用因?yàn)槭悄涿]包,調(diào)用函數(shù)本身。 }) } } //建立class類 function Input_type() { this.init.apply(this, arguments) } Input_type.prototype = input_type //創(chuàng)建實(shí)例 var p = new Input_type($(".content")) p.pri()() });
總結(jié):為了實(shí)現(xiàn)每次循環(huán)間隔時(shí)間,用window.settimeout遞歸的寫法。 因?yàn)橄胗迷玩湻庋b,this沖突,所以遞歸調(diào)用匿名的閉包函數(shù)。用arguments.callee表示匿名函數(shù)。
HTML代碼:
<button id="pri">pri</button> <div class="content" style="display: none;"> 我與父親不相見已二年余了,我最不能忘記的是他的背影。那年冬天,祖母死了,父親的差使也交卸了,正是禍不單行的日子,我從北京到徐州,打算跟著父親奔喪回家。到徐州見著父親,看見滿院狼藉的東西,又想起祖母,不禁簌簌地流下眼淚。父親說,“事已如此,不必難過,好在天無絕人之路!” 回家變賣典質(zhì),父親還了虧空;又借錢辦了喪事。這些日子,家中光景很是慘淡,一半為了喪事,一半為了父親賦閑。喪事完畢,父親要到南京謀事,我也要回北京念書,我們便同行。 到南京時(shí),有朋友約去游逛,勾留了一日;第二日上午便須渡江到浦口,下午上車北去。父親因?yàn)槭旅?,本已說定不送我,叫旅館里一個(gè)熟識(shí)的茶房陪我同去。他再三囑咐茶房,甚是仔細(xì)。但他終于不放心,怕茶房不妥帖;頗躊躇了一會(huì)。其實(shí)我那年已二十歲,北京已來往過兩三次,是沒有甚么要緊的了。他躊躇了一會(huì),終于決定還是自己送我去。我兩三回勸他不必去;他只說,“不要緊,他們?nèi)ゲ缓?!? 我們過了江,進(jìn)了車站。我買票,他忙著照看行李。行李太多了,得向腳夫行些小費(fèi),才可過去。他便又忙著和他們講價(jià)錢。我那時(shí)真是聰明過分,總覺他說話不大漂亮,非自己插嘴不可。但他終于講定了價(jià)錢;就送我上車。他給我揀定了靠車門的一張椅子;我將他給我做的紫毛大衣鋪好坐位。他囑我路上小心,夜里警醒些,不要受涼。又囑托茶房好好照應(yīng)我。我心里暗笑他的迂;他們只認(rèn)得錢,托他們直是白托!而且我這樣大年紀(jì)的人,難道還不能料理自己么?唉,我現(xiàn)在想想,那時(shí)真是太聰明了! 我說道,“爸爸,你走吧?!彼囃饪戳丝?,說,“我買幾個(gè)橘子去。你就在此地,不要走動(dòng)。”我看那邊月臺(tái)的柵欄外有幾個(gè)賣東西的等著顧客。走到那邊月臺(tái),須穿過鐵道,須跳下去又爬上去。父親是一個(gè)胖子,走過去自然要費(fèi)事些。我本來要去的,他不肯,只好讓他去。我看見他戴著黑布小帽,穿著黑布大馬褂,深青布棉袍,蹣跚地走到鐵道邊,慢慢探身下去,尚不大難??墒撬┻^鐵道,要爬上那邊月臺(tái),就不容易了。他用兩手攀著上面,兩腳再向上縮;他肥胖的身子向左微傾,顯出努力的樣子。這時(shí)我看見他的背影,我的淚很快地流下來了。我趕緊拭干了淚,怕他看見,也怕別人看見。我再向外看時(shí),他已抱了朱紅的橘子望回走了。過鐵道時(shí),他先將橘子散放在地上,自己慢慢爬下,再抱起橘子走。到這邊時(shí),我趕緊去攙他。他和我走到車上,將橘子一股腦兒放在我的皮大衣上。于是撲撲衣上的泥土,心里很輕松似的,過一會(huì)說,“我走了;到那邊來信!”我望著他走出去。他走了幾步,回過頭看見我,說,“進(jìn)去吧,里邊沒人?!钡人谋秤盎烊雭韥硗娜死?,再找不著了,我便進(jìn)來坐下,我的眼淚又來了。 近幾年來,父親和我都是東奔西走,家中光景是一日不如一日。他少年出外謀生,獨(dú)力支持,做了許多大事。那知老境卻如此頹唐!他觸目傷懷,自然情不能自已。情郁于中,自然要發(fā)之于外;家庭瑣屑便往往觸他之怒。他待我漸漸不同往日。但最近兩年的不見,他終于忘卻我的不好,只是惦記著我,惦記著我的兒子。我北來后,他寫了一信給我,信中說道,“我身體平安,惟膀子疼痛利害,舉箸提筆,諸多不便,大約大去之期不遠(yuǎn)矣?!蔽易x到此處,在晶瑩的淚光中,又看見那肥胖的,青布棉袍,黑布馬褂的背影。唉!我不知何時(shí)再能與他相見! </div> <div class="div1"> </div>
- js+css實(shí)現(xiàn)打字效果
- C++實(shí)現(xiàn)的打字母游戲示例
- javascript實(shí)現(xiàn)自動(dòng)輸出文本(打字特效)
- 基于Css3和JQuery實(shí)現(xiàn)打字機(jī)效果
- JavaScript實(shí)現(xiàn)打字效果的方法
- C++實(shí)現(xiàn)類似延時(shí)停頓的打字效果
- javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(三)情景對(duì)話中仿打字機(jī)輸出文字
- JavaScript打字小游戲代碼
- javascript 打字效果的文字特效
- javascript 打字游戲?qū)崿F(xiàn)代碼
- javascript之textarea打字機(jī)效果提示代碼推薦
- C語言制作簡(jiǎn)易金山打字通功能的代碼
相關(guān)文章
JS組件Form表單驗(yàn)證神器BootstrapValidator
做Web開發(fā)的我們,表單驗(yàn)證是再常見不過的需求了。友好的錯(cuò)誤提示能增加用戶體驗(yàn)。今天就來看看bootstrapvalidator如何使用,感興趣的小伙伴們可以參考一下2016-01-01js獲取異步函數(shù)數(shù)據(jù)的實(shí)現(xiàn)
本文主要介紹了js獲取異步函數(shù)數(shù)據(jù)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02Bootstrap每天必學(xué)之滾動(dòng)監(jiān)聽
Bootstrap每天必學(xué)之滾動(dòng)監(jiān)聽,對(duì)Bootstrap滾動(dòng)監(jiān)聽感興趣的小伙伴們可以參考一下2016-03-03js實(shí)現(xiàn)根據(jù)文件url批量壓縮下載成zip包
本文主要介紹了js實(shí)現(xiàn)根據(jù)文件url批量壓縮下載成zip包,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02Postman自動(dòng)化接口測(cè)試實(shí)戰(zhàn)
有時(shí)我們可能需要在多個(gè)環(huán)境下對(duì)同一個(gè)接口進(jìn)行測(cè)試。比如我們請(qǐng)求的域名,開發(fā)、測(cè)試、生產(chǎn)環(huán)境,請(qǐng)求參數(shù)。文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11使用phantomjs進(jìn)行網(wǎng)頁抓取的實(shí)現(xiàn)代碼
這篇文章主要介紹了使用phantomjs進(jìn)行網(wǎng)頁抓取的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-09-09JavaScript中this的全面解析及常見實(shí)例
這篇文章主要給大家介紹了關(guān)于JavaScript中this的全面解析及常見實(shí)例的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05