我已经着手制作一个谜题,我正在尝试在 javascript 中制作一个随机播放函数。当我单击文档时,这些片段会按应有的顺序随机播放。但是当紫色方块移动到网格中的#1 位置时,它不会移动!
这是我的 HTML/Javascript:
<head>
<link rel="stylesheet" type="text/css" href="css/css.css" />
</head>
<div id="poster">
<div id="row1">
<div>
<img src="images/black.gif" alt="" id="poster_place_1"/>
</div>
<div>
<img src="images/blue.gif" alt="" id="poster_place_2" />
</div>
<div>
<img src="images/brown.gif" alt="" id="poster_place_3"/>
</div>
</div>
<div id="row2">
<div>
<img src="images/cyan.gif" alt="" id="poster_place_4"/>
</div>
<div>
<img src="images/darkgreen.gif" alt="" id="poster_place_5"/>
</div>
<div>
<img src="images/green.gif" alt="" id="poster_place_6"/>
</div>
</div>
<div id="row3">
<div>
<img src="images/orange.gif" alt="" id="poster_place_7"/>
</div>
<div>
<img src="images/pink.gif" alt="" id="poster_place_8"/>
</div>
<div>
<img src="images/purple.gif" alt="" id="poster_place_9"/>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
function Shuffle(o) {
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
document.onclick = function()
{
var testArray = ["poster_place_1","poster_place_2","poster_place_3","poster_place_4","poster_place_5","poster_place_6","poster_place_7","poster_place_8","poster_place_9"];
Shuffle(testArray);
document.getElementById("poster_place_9").id = testArray[0];
document.getElementById("poster_place_8").id = testArray[1];
document.getElementById("poster_place_7").id = testArray[2];
document.getElementById("poster_place_6").id = testArray[3];
document.getElementById("poster_place_5").id = testArray[4];
document.getElementById("poster_place_4").id = testArray[5];
document.getElementById("poster_place_3").id = testArray[6];
document.getElementById("poster_place_2").id = testArray[7];
document.getElementById("poster_place_1").id = testArray[8];
}
</script>
这是CSS:
#poster_place_1 {
position: absolute;
left: 0px;
top: 0px;
}
#poster_place_2 {
position: absolute;
left: 167px;
top: 0px;
}
#poster_place_3 {
position: absolute;
left: 334px;
top: 0px;
}
#poster_place_4 {
position: absolute;
left: 0px;
top: 167px;
}
#poster_place_5 {
position: absolute;
left: 167px;
top: 167px;
}
#poster_place_6 {
position: absolute;
left: 334px;
top: 167px;
}
#poster_place_7 {
position: absolute;
left: 0px;
top: 334px;
}
#poster_place_8 {
position: absolute;
left: 167px;
top: 334px;
}
#poster_place_9 {
position: absolute;
left: 334px;
top: 334px;
}