很奇怪的前端游戏小问题
//问题在于，每次隐藏的都是第九头牛。如果你想帮我调试一下的话麻烦你照一张小图片，名字改成cow.jpg，这样就可以了。
[code=HTML][/code]<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312"/>
<script src="jquery-1.7.2.js"></script>
<style>
div#frame{
margin:100px auto;
border:2px solid skyblue;
width:300px;
height:300px;
padding:10px;
}
div#one div,div#two div ,div#thr div{
float:left;
margin:10px;
display:block;
}
input#begin{
margin:50px auto;
}
span{
margin:0 auto;
font-size:12px;
}
</style>
</head>
<body>
<div id="frame">
<div id="one">
<div id="a"><img src="cow.png"/></div>
<div id="b"><img src="cow.png"/></div>
<div id="c"><img src="cow.png"/></div>
</div>
<div id="two">
<div id="d"><img src="cow.png"/></div>
<div id="e"><img src="cow.png"/></div>
<div id="f"><img src="cow.png"/></div>
</div>
<div id="thr">
<div id="g"><img src="cow.png"/></div>
<div id="h"><img src="cow.png"/></div>
<div id="i"><img src="cow.png"/></div>
</div>
</div>
<span></span>
<input type="button" value="游戏开始" id="begin"/>
<script>
function getRandom(){ //此方法用于产生1-9的随机数
return Math.floor(Math.random()*9+1);
}
function hide(r){//根据产生的随机数，隐藏一头牛，r就是传进来的随机数
if(r==1)
{
$("div#a").css("display","none");setTimeout(function(){$("div#a").css("display","block");},1000);//隐藏第一头牛，一秒钟以后恢复，一下相同
}
else if(r==2)
{
$("div#b").css("display","none");setTimeout(function(){$("div#b").css("display","block");},1000);
}
else if(r==3)
{
$("div#c").css("display","none");setTimeout(function(){$("div#c").css("display","block");},1000);
}
else if(r==4)
{
$("div#d").css("display","none");setTimeout(function(){$("div#d").css("display","block");},1000);
}
else if(r==5)
{
$("div#e").css("display","none");setTimeout(function(){$("div#e").css("display","block");},1000);
}
else if(r==6)
{
$("div#f").css("display","none");setTimeout(function(){$("div#f").css("display","block");},1000);
}
else if(r==7)
{
$("div#g").css("display","none");setTimeout(function(){$("div#g").css("display","block");},1000);
}
else if(r==8)
{
$("div#h").css("display","none");setTimeout(function(){$("div#h").css("display","block");},1000);
}
else if(r==9)
{
$("div#i").css("display","none");setTimeout(function(){$("div#i").css("display","block");},1000);
}
}
$("input#begin").click(function(){
var ran = getRandom();//获取一个随机数
$("span").html("即将隐藏的是第"+ran+"头牛");//告诉你，哪一个随机数被抽中了
hide(ran);//把随机数传递给hide()方法，隐藏其中一头牛
});
</script>
</body>
</html>
[解决办法]
我测试了一下你的代码没有什么问题，如果你用9张图可以看出来效果，因为你用的一张图DIV上移，所以你感觉都是隐的第9张.
[解决办法]
代码有待优化！
<!DOCTYPE HTML><html><head><meta charset="gb2312"/><script src="http://code.jquery.com/jquery-1.7.2.js"></script><style> div#frame{ margin:100px auto; border:2px solid skyblue; width:300px; height:300px; padding:10px; } div#one div,div#two div ,div#thr div{ float:left; margin:10px; display:block; } input#begin{ margin:50px auto; } span{ margin:0 auto; font-size:12px; }</style></head><body> <div id="frame"> <div id="one"> <div id="1"><img src="cow1.png"/></div><div id="2"><img src="cow2.png"/></div><div id="3"><img src="cow3.png"/></div> </div> <div id="two"> <div id="4"><img src="cow4.png"/></div><div id="5"><img src="cow5.png"/></div><div id="6"><img src="cow6.png"/></div> </div> <div id="thr"> <div id="7"><img src="cow7.png"/></div><div id="8"><img src="cow8.png"/></div><div id="9"><img src="cow9.png"/></div> </div> </div> <span></span> <input type="button" value="游戏开始" id="begin"/> <script>function getRandom(){ //此方法用于产生1-9的随机数return Math.floor(Math.random()*9+1);}function hide(r){//根据产生的随机数，隐藏一头牛，r就是传进来的随机数$("div#"+r).css("display","none");setTimeout(function(){$("div#"+r).css("display","block");},1000);//隐藏第一头牛，一秒钟以后恢复，一下相同} $("input#begin").click(function(){var ran = getRandom();//获取一个随机数$("span").html("即将隐藏的是第"+ran+"头牛");//告诉你，哪一个随机数被抽中了hide(ran);//把随机数传递给hide()方法，隐藏其中一头牛}); </script></body></html>