素材网 素材网

jQuery新手练习键盘打字游戏

下载资源()次

阅读次数()次

发布时间:2016-08-17

jQuery新手练习键盘打字游戏
分享到:

用法简介:

来源:xw素材网

jQuery新手练习键盘打字游戏。
文件引用:

<script type="text/javascript" src="js/jquery-latest.js"></script>
<script>
$(function(){
	var acKey='';//当前按键键码
	var numPosit=320;//字母显示面板位置
	var allNum=$("#allNum").val();//字母总个数
	var acNum=0;//当前字母个数
	var errNum=0;//错误个数
	var uTime=0;//用时
	var state=false;//当前状态(运行/结束)
	//待选字母合集
	var chars = ['0','1','2','3','4','5','6','7','8','9','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'];
	//点击开始
	$("#state").click(fun)
	//键盘事件 
	$(document).keydown(function (event){
		//空格键开始
		if(event.keyCode==32){fun();$("#allNum").blur()}
		if(state){
			$(".keyCont a").css('background-color','#fff').css('color','#8DE2F0');//初始化按键背景色
			acKey=String.fromCharCode(event.keyCode);//获取键码,当前按键
			var acId="#k"+acKey;//当前按键ID
			if($(".showCont ul li").eq(acNum).text()==acKey){
				$(acId).css('background-color','#65e2a9').css('color','#fff');//改变当前按键样式_正确按键时
				numPosit-=80; //待选集合位置移动
				$(".showCont ul").animate({left:numPosit},100);//待选集合位置移动动画
				acNum+=1;//当前个数加1
				$("#allNum").val(allNum-acNum)//剩余个数
			}else{
				$(acId).css('background-color','#ff5d5d').css('color','#fff');//改变当前按键样式_错误按键时
				if((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=65&&event.keyCode<=90))
				 errNum+=1;//错误个数+1,只选范围之内
			}
			//最后一个结束
			if(acNum==allNum){fun()}
		}
	});
	//功能操作
	function fun(){
		//开始结束切换、变换按钮显示文字
		if(!state){
			$("#state").text('停止(space)');
			state=true;
		}else{
			$("#state").text('开始(space)')
			state=false;
		}
		if(state){
			start()
		}else{
			over()
		}
	}
	//功能函数_开始
	function start(){
		/*初始化显示状态*/
		$("#allNum").val(allNum);
		$("#uTime").text("时间:0");
		$("#result").text("结果:0");
		$(".showCont ul").text('');
		errNum=0;
		acNum=0;
		numPosit=320;
		$(".showCont ul").css('left',numPosit);
		/****************************************/
		//随机产生待选集合
		for(var i=0;i<=allNum;i++){
			$(".showCont ul").css('width',81*allNum);
			$(".showCont ul").append("<li>"+chars[GetRandomNum(0,35)]+"</li>");
		}
		//开始计时
		timer=setInterval(function(){uTime+=0.1;$("#uTime").text("时间:"+uTime.toFixed(1)+"秒")},100);
	}
	//功能函数_结束
	function over(){
		//结束计时
		clearInterval(timer);
		//计算速率
		var resultNum=acNum/uTime;
		if(acNum!=allNum){//完成全部字母
			//resultNum.toFixed(2)保留两位小数
			$("#result").text("未完成:每秒"+resultNum.toFixed(2)+"个"+"错误"+errNum+"个");
		}else{//未完成全部字母
			$("#result").text("结果:每秒"+resultNum.toFixed(2)+"个"+"错误"+errNum+"个");
		}
		uTime=0;//计时器清零
	}
	//计时器
	var timer=setInterval(function(){uTime+=0.1;$("#uTime").text("时间:"+uTime.toFixed(1)+"秒")},100);
	clearInterval(timer);//暂停计时器
})
/*产生范围内随机数*/
function GetRandomNum(Min,Max)
{   
var Range = Max - Min;   
var Random = Math.random();   
return(Min + Math.round(Random * Range));   
}
</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。