欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery 寫的簡單打字游戲可以提示正確和錯誤的次數(shù)

 更新時間:2014年07月01日 09:50:40   投稿:whsnow  
這篇文章主要介紹了使用jQuery寫的簡單打字游戲可以提示正確和錯誤的次數(shù),需要的朋友可以參考下
var off_x; //橫坐標(biāo) 
var count=0; //總分 
var speed=5000; //速度,默認是5秒. 
var keyErro=0; //輸入錯誤次數(shù) 
var keyRight=0; //輸入正確的次數(shù) 

//組織字母 
var charArray=new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"); 
//按鍵碼數(shù)組 
var arrCode=new Array(); 
for(var i=65;i<=90;i++){ 
arrCode[i-65]=i; 
} 
//隨機生產(chǎn)一個字母 
var randomChar=function(){ 
off_x=Math.random()*500+5; //在div橫坐標(biāo) 
//off_y=Math.random()*500-10; //在div縱坐標(biāo) 
var c=charArray[parseInt(Math.random()*25)]; //隨機生成一個字母 
var charHtml=" <div class='char' id='"+c+"' style='left: "+off_x+"px;color:"+colorBox()+"'>"+c+"</div>"; 
$("#div1").append(charHtml); 
}; 

var colorBox=function(){ 
Color=[]; //用數(shù)組存放顏色的樣式 
Color[0]="#ff2211"; 
Color[1]="#ff3311"; 
Color[2]="#ff5511"; 
Color[3]="#ff8811"; 
Color[4]="#ffBB99"; 
Color[5]="#1ff4f1"; 
Color[6]="#ff5566"; 
Color[7]="#668899"; 
Color[8]="#99BBfA"; 
Color[9]="#fECECC"; 
return Color[parseInt(Math.random()*10)]; //隨機生顏色. 
} 

//每隔三秒就調(diào)用些方法生產(chǎn)字母 
function accrueChar(){ 
//把隨機出來的放在動畫隊列里 
var _sildeFun=[ 
//把要執(zhí)行的動畫依次放入一個數(shù)組里 
function(){$('#div1 div').animate({top:'+=470px'},speed,function(){ 
//當(dāng)動畫執(zhí)行完時,就刪除 
$(this).remove(); 
count-=10; 
$("input[type='text']").attr({"value":count}); 
});} 
]; 
//將函數(shù)組放入slideList動畫隊列里 
$("#div1").queue('slideList',_sildeFun); 
var _takeStart=function(){ 
//從隊列最前端移除一個隊列函數(shù),并執(zhí)行他。 
$("#div1").dequeue("slideList"); 
}; 

function randCharHandle(){ 
randomChar(); 
_takeStart(); 

} 
randCharHandle(); 
} 

//健碼的處理 
function keyCode(event){ 
var keyValue = event.keyCode; 
var flag=false; 
//alert(keyValue); 
for(var i=0;i<=arrCode.length;i++){ 
if(keyValue==arrCode[i]&&$("#"+charArray[i]+"").text()!=""){ 

//選對后停止一秒 
$("#"+charArray[i]+"").stop(1000).remove(); 
//選對就加10分 
count+=10; 
$("input[type='text']").attr({"value":count}); 
$("#right").text(keyRight); 

flag=true; 
break; 
} 
} 
if(flag){ 
flag=false; 
keyRight++; 
$("#right").text(keyRight); 

}else{ 
keyErro++; 
$("#erro").text(keyErro); 
} 
} 

$(function(){ 

//加速 
$("input[value='加速++']").click(function(){ 
if(speed>0) 
speed-=1000; 
}); 

//減速 
$("input[value='減速--']").click(function(){ 
speed+=1000; 
}); 


}); 
window.setInterval("accrueChar()",1500);

/*******************************************HTML頁面***************************************************/

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="../../jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript" src="test.js"></script> 
<title>打字游戲</title> 
<style type="text/css"> 
#div1{ 
border: 2px red solid; 
width:500px; 
height: 500px; 
background-color: black; 
} 
.char{ 
width: 20px; 
height:20px; 
position:absolute; 
font: 40px; 

} 
</style> 
</head> 
<body onkeypress="keyCode(event)"> 
<div id="div1"> 

</div> 
<div> 
<br>總數(shù):<input type="text" readonly="readonly"> 
<input type="button" value="加速++"> 
<input type="button" value="減速--"> 
<br>錯誤次數(shù):<label id="erro"></label> 
<br>正確次數(shù):<label id="right"></label> 
</div> 
</body> 
</html>

相關(guān)文章

  • jquery實現(xiàn)動態(tài)畫圓

    jquery實現(xiàn)動態(tài)畫圓

    這篇文章主要給大家分享了一段jquery實現(xiàn)動態(tài)畫圓代碼,需要的朋友可以參考下
    2014-12-12
  • jquery 元素相對定位代碼

    jquery 元素相對定位代碼

    align:左右對齊;vlign:垂直對齊;xleft:水平補給值;xleft:垂直補給值;adjust:是否相對窗口自動調(diào)整;rwindow:定位相對于窗口(align&vlign為center時垂直或水平居中)
    2010-10-10
  • jQuery簡單操作cookie的插件實例

    jQuery簡單操作cookie的插件實例

    這篇文章主要介紹了jQuery簡單操作cookie的插件,以實例形式分析了jQuery操作cookie的插件功能定義與使用技巧,需要的朋友可以參考下
    2016-01-01
  • jquery簡單插件制作(fn.extend)完整實例

    jquery簡單插件制作(fn.extend)完整實例

    這篇文章主要介紹了jquery簡單插件制作(fn.extend)方法,結(jié)合完整實例形式分析了jQuery fn.extend擴展插件的實現(xiàn)技巧,需要的朋友可以參考下
    2016-05-05
  • Jquery ajax請求導(dǎo)出Excel表格的實現(xiàn)代碼

    Jquery ajax請求導(dǎo)出Excel表格的實現(xiàn)代碼

    下面小編就為大家?guī)硪黄狫query ajax請求導(dǎo)出Excel表格的實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • jQuery+ajax讀取并解析XML文件的方法

    jQuery+ajax讀取并解析XML文件的方法

    這篇文章主要介紹了jQuery+ajax讀取并解析XML文件的方法,涉及jQuery的ajax方法調(diào)用xml文件及針對xml數(shù)據(jù)的遍歷與節(jié)點操作相關(guān)技巧,需要的朋友可以參考下
    2016-09-09
  • 詳解獲取jq ul第一個li定位的四種解決方案

    詳解獲取jq ul第一個li定位的四種解決方案

    本篇文章主要介紹了多個ul中獲取第一個li定位的四種解決方案,需要的朋友可以過來參考下
    2016-11-11
  • jQuery學(xué)習(xí)筆記之Ajax用法實例詳解

    jQuery學(xué)習(xí)筆記之Ajax用法實例詳解

    這篇文章主要介紹了jQuery學(xué)習(xí)筆記之Ajax用法,結(jié)合實例形式較為詳細的分析總結(jié)了jQuery中ajax的相關(guān)使用技巧,包括ajax請求、載入、處理、傳遞等,需要的朋友可以參考下
    2015-12-12
  • 基于Bootstrap和jQuery構(gòu)建前端分頁工具實例代碼

    基于Bootstrap和jQuery構(gòu)建前端分頁工具實例代碼

    本文給大家介紹基于Bootstrap和jQuery構(gòu)建前端分頁工具實例代碼,包括前端分頁的優(yōu)缺點和解決辦法,對jquery bootstrap分頁知識感興趣的朋友一起通過本文學(xué)習(xí)吧
    2016-11-11
  • Tab頁界面,用jQuery及Ajax技術(shù)實現(xiàn)

    Tab頁界面,用jQuery及Ajax技術(shù)實現(xiàn)

    從桌面開發(fā)的時代開始,Tab頁就是一個優(yōu)異的界面布局形式,兼有菜單的樣式和充分復(fù)用有限的界面的優(yōu)點。
    2009-09-09

最新評論