<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选字游戏</title>
<style>
#wrap{width: 400px;height: 600px;border: 1px solid red;margin: auto}
#big{font-size: 140px;text-align: center}
li{list-style: none;float: left;width: 20%;font-size: 40px;}
</style>
<script src="js/jquery-1.7.1.min.js"></script>
</head>
<body>
<div id="wrap">
<div id="big"></div>
<p>根据上面的文字选择正确的颜色</p>
<ul id="small">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
var bigTextNum = 0;
//创建随机数
function randFn(max,min){
return parseInt(Math.random()*(max-min)+min)
}
//创建颜色数组
var arrAllText = ['红','黑','黄','蓝','绿'];
var arrAllColor = ['red','black','yellow','blue','green'];
//为上面一个div添加随机文字
function setBig(){
$("#big").css({
color:arrAllColor[randFn(0,5)],
})
ranTextNum=randFn(0,5);
//储存下标
bigTextNum=ranTextNum;
$("#big").text(arrAllText[ranTextNum]);
}
setBig();
//为下面的li添加文字
function setSmall(){
//这是为了防止第二次时事件带来的影响，清除所有事件
$("li").off("click");
//深拷贝******
var arrTempText = [].concat(arrAllText);
var arrTempColor = [].concat(arrAllColor);
var lis=$("#small li");
for (var i = 0; i < lis.length; i++) {
var num=randFn(0,arrTempText.length);
lis.eq(i).text(arrTempText[num]);
var numC=randFn(0,arrTempColor.length);
lis.eq(i).css("color",arrTempColor[numC]);
//比较上面文字和下面文字的下标，因为他们是对应的
if(arrAllColor[bigTextNum] == arrTempColor[numC]){
lis.eq(i).on("click",function(){
setBig();
setSmall();
})
}
//防止li里出现重复的字，所以添加一个从数组里删除一个
arrTempText.splice(num,1);
arrTempColor.splice(numC,1);
};
}
setSmall();
})
</script>
</body>
</html>
