基于javascript實現(xiàn)句子翻牌網(wǎng)頁版小嬉戲_

1、基于javascript實現(xiàn)句子翻牌網(wǎng)頁版小嬉戲_ 這篇文章主要介紹了基于javascript實現(xiàn)句子翻牌網(wǎng)頁版小嬉戲的相關(guān)資料,需要的伴侶可以參考下 本文實例為大家分享了js實現(xiàn)句子翻牌網(wǎng)頁版小嬉戲，供大家參考，具體內(nèi)容如下 效果圖： 實現(xiàn)思路： 考察打字力量和記憶力量的益智小嬉戲。 1.會先把一段文字顯示 2.一小段時間后顯示背面 3.輸入框輸入文字與文字全部對應(yīng)顯示正面 具體代碼： html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title句子翻牌/title link href=css/

2、reset.css rel=stylesheet / link href=css/fanpai.css rel=stylesheet / script type=text/javascript src=js/jquery-1.10.2.js/script script type=text/javascript $(function() /ht5 dom var otestAudio=document.getElementById(test-audio); /data var data_all=; data_all0= id:0,text:我,愛你,嗎,？,is:true,count:3,url

3、:audio/1.mp3, id:1,text:友愛的,你,好嗎,？,is:true,count:3,url:audio/2.mp3, id:2,text:不知道,啊,！,is:true,count:2,url:audio/3.mp3, id:3,text:感謝,你,說的,。,is:true,count:3,url:audio/4.mp3, id:4,text:或許,對吧,！,is:true,count:2,url:audio/5.mp3, id:5,text:聽,不懂,啊,！,is:true,count:3,url:audio/1.mp3, id:6,text:天天,向上,，,好好,學(xué)習(xí),。

4、,is:true,count:4,url:audio/2.mp3, id:7,text:你,說的,不,對,！,is:true,count:4,url:audio/3.mp3, id:8,text:不要,問,為什么,！,is:true,count:3,url:audio/4.mp3, id:9,text:很,難,理解,你的話,。,is:true,count:4,url:audio/5.mp3, id:10,text:你,不愛你,嗎,？,is:true,count:3,url:audio/1.mp3, id:11,text:媽媽,你,好嗎,？,is:true,count:3,url:audio/2

5、.mp3, id:12,text:想,知道,啊,！,is:true,count:3,url:audio/3.mp3, id:13,text:你,說的,。,is:true,count:2,url:audio/4.mp3, id:14,text:真的,或許,對吧,！,is:true,count:3,url:audio/5.mp3, id:15,text:完全,聽,不懂,啊,！,is:true,count:4,url:audio/1.mp3, id:16,text:要,努力,讀書。,is:true,count:3,url:audio/2.mp3, id:17,text:他,說的,不,對,！,is:t

6、rue,count:4,url:audio/3.mp3, id:18,text:請,問,快了嗎,！,is:true,count:4,url:audio/4.mp3, id:19,text:哈哈,難,理解,你的話,。,is:true,count:4,url:audio/5.mp3 ; data_all1= id:0,text:你說出,你的,問題,去,改進,。,is:true,count:5,url:audio/1.mp3, id:1,text:我,怎么,知道,你,好不好,？,is:true,count:5,url:audio/2.mp3, id:2,text:不要,問,為什么,好嗎,？,is:t

7、rue,count:4,url:audio/3.mp3, id:3,text:就,你,說的,是,對的,。,is:true,count:5,url:audio/4.mp3, id:4,text:大家,明天,一起,出去,郊游,。,is:true,count:5,url:audio/5.mp3, id:5,text:你,肯定,要帥,，,肯定,要低調(diào),。,is:true,count:5,url:audio/1.mp3, id:6,text:你,去了,你二大爺,家,了嗎,？,is:true,count:5,url:audio/2.mp3, id:7,text:天南,海北,，,眾人,皆是,。,is:tru

8、e,count:4,url:audio/3.mp3, id:8,text:天與海,的,距離,就是,不愛你,。,is:true,count:5,url:audio/4.mp3, id:9,text:不知道,無罪,，,頑強,些,。,is:true,count:4,url:audio/5.mp3, id:10,text:大中華,兒女,，,華夏,子孫,。,is:true,count:4,url:audio/1.mp3, id:11,text:兒時,的,時間,是,美妙的,。,is:true,count:5,url:audio/2.mp3, id:12,text:哪里,那么,多,隱秘,。,is:true,

9、count:4,url:audio/3.mp3, id:13,text:有,你,就是,晴天,，,對吧,！,is:true,count:5,url:audio/4.mp3, id:14,text:說的,和,真的,似的,，,太假了,！,is:true,count:5,url:audio/5.mp3, id:15,text:呵呵,，,凈,瞎扯淡,！,is:true,count:3,url:audio/1.mp3, id:16,text:行了,，,就,你,知道,？,is:true,count:4,url:audio/2.mp3, id:17,text:好好,學(xué)習(xí),，,才能,越來越好,。,is:true

10、,count:4,url:audio/3.mp3, id:18,text:真的,無所依,，,孤獨的,我,。,is:true,count:4,url:audio/4.mp3, id:19,text:你知道,的話,就,說,出來嘛,！,is:true,count:5,url:audio/5.mp3 ; data_all2= id:0,text:我,愛你,嗎,？,is:true,count:3,url:audio/1.mp3, id:1,text:友愛的,你,好嗎,？,is:true,count:3,url:audio/2.mp3, id:2,text:不知道,啊,！,is:true,count:2,

11、url:audio/3.mp3, id:3,text:感謝,你,說的,。,is:true,count:3,url:audio/4.mp3, id:4,text:或許,對吧,！,is:true,count:2,url:audio/5.mp3, id:5,text:聽,不懂,啊,！,is:true,count:3,url:audio/1.mp3, id:6,text:天天,向上,，,好好,學(xué)習(xí),。,is:true,count:4,url:audio/2.mp3, id:7,text:你,說的,不,對,！,is:true,count:4,url:audio/3.mp3, id:8,text:不要,問

12、,為什么,！,is:true,count:3,url:audio/4.mp3, id:9,text:很,難,理解,你的話,。,is:true,count:4,url:audio/5.mp3, id:10,text:你,不愛你,嗎,？,is:true,count:3,url:audio/1.mp3, id:11,text:媽媽,你,好嗎,？,is:true,count:3,url:audio/2.mp3, id:12,text:想,知道,啊,！,is:true,count:3,url:audio/3.mp3, id:13,text:你,說的,。,is:true,count:2,url:audio

13、/4.mp3, id:14,text:真的,或許,對吧,！,is:true,count:3,url:audio/5.mp3, id:15,text:完全,聽,不懂,啊,！,is:true,count:4,url:audio/1.mp3, id:16,text:要,努力,讀書。,is:true,count:3,url:audio/2.mp3, id:17,text:他,說的,不,對,！,is:true,count:4,url:audio/3.mp3, id:18,text:請,問,快了嗎,！,is:true,count:4,url:audio/4.mp3, id:19,text:哈哈,難,理解,

14、你的話,。,is:true,count:4,url:audio/5.mp3 ; data_all3= id:0,text:你說出,你的,問題,去,改進,。,is:true,count:5,url:audio/1.mp3, id:1,text:我,怎么,知道,你,好不好,？,is:true,count:5,url:audio/2.mp3, id:2,text:不要,問,為什么,好嗎,？,is:true,count:4,url:audio/3.mp3, id:3,text:就,你,說的,是,對的,。,is:true,count:5,url:audio/4.mp3, id:4,text:大家,明天,

15、一起,出去,郊游,。,is:true,count:5,url:audio/5.mp3, id:5,text:你,肯定,要帥,，,肯定,要低調(diào),。,is:true,count:5,url:audio/1.mp3, id:6,text:你,去了,你二大爺,家,了嗎,？,is:true,count:5,url:audio/2.mp3, id:7,text:天南,海北,，,眾人,皆是,。,is:true,count:4,url:audio/3.mp3, id:8,text:天與海,的,距離,就是,不愛你,。,is:true,count:5,url:audio/4.mp3, id:9,text:不知道,

16、無罪,，,頑強,些,。,is:true,count:4,url:audio/5.mp3, id:10,text:大中華,兒女,，,華夏,子孫,。,is:true,count:4,url:audio/1.mp3, id:11,text:兒時,的,時間,是,美妙的,。,is:true,count:5,url:audio/2.mp3, id:12,text:哪里,那么,多,隱秘,。,is:true,count:4,url:audio/3.mp3, id:13,text:有,你,就是,晴天,，,對吧,！,is:true,count:5,url:audio/4.mp3, id:14,text:說的,和,

17、真的,似的,，,太假了,！,is:true,count:5,url:audio/5.mp3, id:15,text:呵呵,，,凈,瞎扯淡,！,is:true,count:3,url:audio/1.mp3, id:16,text:行了,，,就,你,知道,？,is:true,count:4,url:audio/2.mp3, id:17,text:好好,學(xué)習(xí),，,才能,越來越好,。,is:true,count:4,url:audio/3.mp3, id:18,text:真的,無所依,，,孤獨的,我,。,is:true,count:4,url:audio/4.mp3, id:19,text:你知道,

18、的話,就,說,出來嘛,！,is:true,count:5,url:audio/5.mp3 ; var guan_arr= n:第一關(guān),c:正常語序, n:其次關(guān),c:嫻熟熟識, n:第三關(guān),c:留意：詞語打亂了, n:第四關(guān),c:聚精會神, n:第五關(guān),c:困難語序 ; /base var current_guan=1;/當(dāng)前所在關(guān)卡 var current_index=0;/答對記錄數(shù) var dong=null;/全局動畫 var alltime=300;/答題時間 var iskey=true;/是否按鍵可用 var count=0;/詞語記錄數(shù) var subindex=null;/子

19、記錄鍵 var starttime=0;/開頭時作答時間 /event $(.game-fp-start).click(function() $(.game-fp-name).hide(); $(.game-fp-sm).hide(); $(.game-fp-start).hide(); init(); ); $(.game-fp-tools-see).children(dt).click(function() funopen(); setTimeout(function() funclose(); ,2021); ); $(#game-fp-input).children(input).ke

20、yup(function() if(iskey) var stext=$(this).val(); matchval(stext); next($(#game-fp-words).children(div).length); else; ); $(.game-fp-tools-pause).click(function() if($(#game-fp-input).children(input).prop(disabled)=false) clearInterval(dong); $(#game-fp-input).children(input).attr(disabled,disabled)

21、; $(#game-fp-pause).show(); else ); $(#game-fp-sta).click(function() $(#game-fp-input).children(input).removeAttr(disabled); $(#game-fp-pause).hide(); $(#game-fp-input).children(input).focus(); inctime(); ); $(#game-fp-reset-btn).click(function() current_guan=1; current_index=0; alltime=300; iskey=t

22、rue; subindex=null; count=0; for(var i=0;idata_all.length;i+) for(var j=0;jdata_alli.length;j+) data_allijis=true; ; ; $(#game-fp-reset).hide(); init(); ); $(.game-fp-tools-skip).children(dt).click(function() if($(#game-fp-input).children(input).prop(disabled)=false) if($(this).children(span).html()

23、=0) else $(this).children(span).html($(this).children(span).html()-1); $(#game-fp-words).children().remove(); fundata(); ; else ); $(window).keyup(function(event) switch (event.which) case 35:/end $(.game-fp-tools-pause).trigger(click); break; case 36:/hpme break; case 33:/pageup $(.game-fp-tools-se

24、e).children(dt).trigger(click); break; case 34:/pagedown $(.game-fp-tools-skip).children(dt).trigger(click); break; ); /handel function matchval(stext) var real=stext; var delay=0; $(#game-fp-words).children(div).each(function(index, element) var ishas=stext.search($(this).children(span).text(); var

25、 that=$(this); if(ishas-1 $(this).attr(is)=0) delay=parseInt(delay)+parseInt(80); $(this).attr(is,1); addfen(10); setTimeout(function() that.removeClass(close).addClass(open); that.children(em).addClass(feiqi); ,delay); real=real.replace($(this).children(span).text(),); else ; ); $(#game-fp-input).c

26、hildren(input).val(real); ; function addfen(num) $(#game-fp-fen).find(input).val(parseInt($(#game-fp-fen).find(input).val()+parseInt(num); ; function next(zlen) if($(#game-fp-words).children(divis=1).length=zlen $(#game-fp-input).children(input).val().length=0) iskey=false; success(); else; ; functi

27、on success() showok(); var alltime=null; if(otestAudio.duration) alltime=otestAudio.duration; skipsuccess(alltime); else otestAudio.onloadedmetadata=function() alltime=otestAudio.duration; skipsuccess(alltime); ; ; ; function showok() $(#game-fp-words).children().remove(); var rindex=current_guan-1;

28、 var zz=chatime(); $(#game-fp-result).show(); $(#game-fp-result).append(strong class=zonghefen zonghefeiqi20/strong); $(#game-fp-result).append(strong class=mintimefen mintimefeiqi+zz+/strong) addfen($(#game-fp-result).children(.zonghefen).html(); addfen($(#game-fp-result).children(.mintimefen).html

29、(); var showval=data_allrindexsubindex.text.split(,).join(); count=parseInt(count)+parseInt(data_allrindexsubindex.count); $(#game-fp-result).children(p).html(showval); otestAudio.src=data_allrindexsubindex.url; ; function chatime() var chaval=(new Date().getTime()-starttime)/1000; if(chaval=5) retu

30、rn 30; else if(chaval5 chaval=10) return 20; else if(chaval10) return 10; else return 0; ; ; function skipsuccess(alltime) otestAudio.play(); current_index=parseInt(current_index)+parseInt(1); if(current_index%10=0) current_guan=parseInt(current_guan)+parseInt(1); setTimeout(function() $(#game-fp-re

31、sult).children(.zonghefen).remove(); $(#game-fp-result).children(.mintimefen).remove(); $(#game-fp-result).hide(); funguan(); ,parseInt(alltime*1000); setTimeout(function() fundata(); ,parseInt(alltime*1000)+parseInt(1000); else setTimeout(function() $(#game-fp-result).children(.zonghefen).remove();

32、 $(#game-fp-result).children(.mintimefen).remove(); $(#game-fp-result).hide(); fundata(); ,parseInt(alltime*1000); ; $(#game-fp-input).children(input).val(); ; /function function init() $(#game-fp-box).show(); $(#game-fp-input).children(input).val(); $(#game-fp-fen).find(input).val(0); $(#game-fp-in

33、put).children(input).attr(disabled,disabled); $(#game-fp-time).children(span).html(alltime); funguan(); setTimeout(function() fundata(); ,1000); inctime(); ; function funguan() $(#game-fp-guanka).children(strong).html(guan_arrcurrent_guan-1.n); $(#game-fp-guanka).children(span).html(guan_arrcurrent_

34、guan-1.c); $(#game-fp-guanka).show(); setTimeout(function() $(#game-fp-guanka).hide(); ,1000) ; function fundata() $(#game-fp-input).children(input).attr(disabled,disabled); setTimeout(function() appenddata(); iskey=true; ,0); setTimeout(function() funclose(); $(#game-fp-input).children(input).focus

35、(); ,2021); ; function appenddata() if(current_guan=2) var arrtext=returnraditem().text.split(,); /console.log(current_guan+-+returnraditem().id); for(var i=0;iarrtext.length;i+) var tmp=$(div class=fanpai is=0span+ arrtexti +/spanem10/em/div); $(#game-fp-words).append(tmp); ; else if(current_guan2

36、current_guan=4) var arrtext=returnraditem().text.split(,); /亂序處理 var lasttext=; var eearr=luanxu(arrtext.length); for(var j=0;jeearr.length;j+) lasttext.push(arrtexteearrj); ; for(var i=0;ilasttext.length;i+) var tmp=$(div class=fanpai is=0span+ lasttexti +/spanem10/em/div); $(#game-fp-words).append

37、(tmp); ; ; ; function luanxu(maxlen) var rarr=; for(var i=0;imaxlen;i+) rarr.push(i); ; var eearr=; for(var j=0;jmaxlen;j+) var ing=Math.floor(Math.random()*rarr.length); eearr.push(rarring); rarr.splice(ing,1); ; return eearr; ; function returnraditem() var rindex=current_guan-1; var temparr=; for(

38、var i=0;idata_allrindex.length;i+) if(data_allrindexiis=true) temparr.push(data_allrindexi); else; ; var realrad=Math.floor(Math.random()*temparr.length); for(var i=0;idata_allrindex.length;i+) if(data_allrindexiid=temparrrealradid) data_allrindexiis=false; subindex=i; else; ; return temparrrealrad;

39、 ; function funclose() $(#game-fp-input).children(input).removeAttr(disabled); $(#game-fp-input).children(input).focus(); starttime=new Date().getTime(); $(#game-fp-words).children(div).each(function(index, element) if($(this).attr(is)=0) $(this).removeClass(open).addClass(close); else; ); ; functio

40、n funopen() $(#game-fp-input).children(input).attr(disabled,disabled); $(#game-fp-words).children(div).each(function(index, element) if($(this).attr(is)=0) $(this).removeClass(close).addClass(open); else; ); ; function inctime() dong=setInterval(function() alltime-=1; if(alltime0) clearInterval(dong

41、); $(#game-fp-words).children().remove(); $(#game-fp-box).hide(); $(#game-fp-input).children(input).attr(disabled,disabled); $(.game-fp-reset-con-a).html($(#game-fp-fen).find(input).val(); $(.game-fp-reset-con-b).html(current_index); $(.game-fp-reset-con-c).html(count); $(#game-fp-reset).show(); else $(#game-fp-time).children(spa