想实现点击开始 整个拼图图片随机排序 可是没有实现 请大家帮忙<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<form action="" id="f1" method="post">
<table border="10">
<tr>
<td><div id="div1" onclick="handleClick(this)"><img src="01.jpg" width="200" height="200"/></div></td>
<td><div id="div2" onclick="handleClick(this)"><img src="02.jpg" width="200" height="200"/></div></td>
<td><div id="div3" onclick="handleClick(this)"><img src="03.jpg"width="200" height="200"/></div></td>
<td><div id="div4" onclick="handleClick(this)"><img src="04.jpg" width="200" height="200"/></div></td>
<td><div id="div13" onclick="handleClick(this)"></div></td>
</tr>
<tr>
<td><div id="div5" onclick="handleClick(this)"><img src="05.jpg"width="200" height="200"/></div></td>
<td><div id="div6" onclick="handleClick(this)"><img src="06.jpg"width="200" height="200"/></div></td>
<td><div id="div7" onclick="handleClick(this)"><img src="07.jpg" width="200" height="200"/></div></td>
<td><div id="div8" onclick="handleClick(this)"><img src="08.jpg"width="200" height="200" /></div></td>
<td align="left" ><input type="button" value="游戏开始" onclick="createNewGame()" /><br />
<br /><br /><br /><br />
<input type="submit" value="还原游戏" /></td>
</tr>
<tr>
<td><div id="div9" onclick="handleClick(this)"><img src="09.jpg" width="200" height="200"/></div></td>
<td><div id="div10" onclick="handleClick(this)"><img src="10.jpg" width="200" height="200"/></div></td>
<td><div id="div11" onclick="handleClick(this)"><img src="11.jpg"width="200" height="200"/></div></td>
<td><div id="div12" onclick="handleClick(this)"><img src="12.jpg" width="200" height="200"/></div></td>
<td ><img src="yuantu.jpg" width="200" height="200"/></td>
</tr>
</table>
</form><script type="text/javascript">
function createNewGame(){
var array = new createRandomArray();
for(var i=1;i<13;i++){
var oDiv=document.getElementById("div"+i).innerHtml='<img src="array[i]+"jpg">';
//var imgUrl=""+array[i-1]+"jpg";
//oDiv.innerHtml='<img src="array[i-1]+"jpg">';
}
var oDiv13=document.getElementById("div13");
oDiv13.innerHTML="";
setMoveEnable();
}function createRandomArray(){
var array = new Array();
for(var i=1;i<13;i++){
array.push(i);
}
array.sort(mysort);
return array;
}function mysort(a,b){
var tmp = Math.round(Math.random()*11)+1;
return tmp?a-b:b-a;
}function setMoveEnable(){
for(var k=1;k<=13;k++){
var oDiv = document.setElementById("div"+k);
oDiv.moveEnable=false;
}
for(var i=1;i<=13;i++){
var oDiv=document.getElenmentById("div"+i);
if(oDiv.innerHTML==""){
oDropTarget=oDiv;
oDivEnable1=document.getElementById("div"+eval(i-1));
oDivEnable2=document.getElementById("div"+eval(i+1));
oDivEnable3=document.getElementById("div"+eval(i-4));
oDivEnable4=document.getElementById("div"+eval(i+4));
for(var j=1;j<=4;j++){
var oDivEnable=eval("oDivEnable"+j);
if(oDivEnable!=null){
oDivEnable.moveEnable=true;
}
}
switch(oDiv.id){
case "div4":document.getElementById("div5").moveEnable=false;break;
case "div5":document.getElementById("div4").moveEnable=false;break;
case "div8":document.getElementById("div9").moveEnable=false;break;
case "div9":document.getElementById("div8").moveEnable=false;break;
}
}
}
} function handleClick(oDiv){
if(oDiv.moveEnable==true){
oRelatedTarget=oDiv;
var str1=oDropTarget.innerHTML;
var str2=oRelatedTarget.innerHTML;
oDropTarget.innerHTML=str2;
oRelatedTarget.innerHTML=str1;
setMoveEnable();
}
} function showFinalImg(){
var oDiv=document.getElementById("showFinalImg");
oDiv.style.display="block";
}
function closeShowFinalImg(){
var oDiv=document.getElementById("showFinalImg");
oDiv.style.display="none";
} </script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<form action="" id="f1" method="post">
<table border="10">
<tr>
<td><div id="div1" onclick="handleClick(this)"><img src="01.jpg" width="200" height="200"/></div></td>
<td><div id="div2" onclick="handleClick(this)"><img src="02.jpg" width="200" height="200"/></div></td>
<td><div id="div3" onclick="handleClick(this)"><img src="03.jpg"width="200" height="200"/></div></td>
<td><div id="div4" onclick="handleClick(this)"><img src="04.jpg" width="200" height="200"/></div></td>
<td><div id="div13" onclick="handleClick(this)"></div></td>
</tr>
<tr>
<td><div id="div5" onclick="handleClick(this)"><img src="05.jpg"width="200" height="200"/></div></td>
<td><div id="div6" onclick="handleClick(this)"><img src="06.jpg"width="200" height="200"/></div></td>
<td><div id="div7" onclick="handleClick(this)"><img src="07.jpg" width="200" height="200"/></div></td>
<td><div id="div8" onclick="handleClick(this)"><img src="08.jpg"width="200" height="200" /></div></td>
<td align="left" ><input type="button" value="游戏开始" onclick="createNewGame()" /><br />
<br /><br /><br /><br />
<input type="submit" value="还原游戏" /></td>
</tr>
<tr>
<td><div id="div9" onclick="handleClick(this)"><img src="09.jpg" width="200" height="200"/></div></td>
<td><div id="div10" onclick="handleClick(this)"><img src="10.jpg" width="200" height="200"/></div></td>
<td><div id="div11" onclick="handleClick(this)"><img src="11.jpg"width="200" height="200"/></div></td>
<td><div id="div12" onclick="handleClick(this)"><img src="12.jpg" width="200" height="200"/></div></td>
<td ><img src="yuantu.jpg" width="200" height="200"/></td>
</tr>
</table>
</form><script type="text/javascript">
function createNewGame(){
var array = new createRandomArray();
for(var i=1;i<13;i++){
var oDiv=document.getElementById("div"+i).innerHtml='<img src="array[i]+"jpg">';
//var imgUrl=""+array[i-1]+"jpg";
//oDiv.innerHtml='<img src="array[i-1]+"jpg">';
}
var oDiv13=document.getElementById("div13");
oDiv13.innerHTML="";
setMoveEnable();
}function createRandomArray(){
var array = new Array();
for(var i=1;i<13;i++){
array.push(i);
}
array.sort(mysort);
return array;
}function mysort(a,b){
var tmp = Math.round(Math.random()*11)+1;
return tmp?a-b:b-a;
}function setMoveEnable(){
for(var k=1;k<=13;k++){
var oDiv = document.setElementById("div"+k);
oDiv.moveEnable=false;
}
for(var i=1;i<=13;i++){
var oDiv=document.getElenmentById("div"+i);
if(oDiv.innerHTML==""){
oDropTarget=oDiv;
oDivEnable1=document.getElementById("div"+eval(i-1));
oDivEnable2=document.getElementById("div"+eval(i+1));
oDivEnable3=document.getElementById("div"+eval(i-4));
oDivEnable4=document.getElementById("div"+eval(i+4));
for(var j=1;j<=4;j++){
var oDivEnable=eval("oDivEnable"+j);
if(oDivEnable!=null){
oDivEnable.moveEnable=true;
}
}
switch(oDiv.id){
case "div4":document.getElementById("div5").moveEnable=false;break;
case "div5":document.getElementById("div4").moveEnable=false;break;
case "div8":document.getElementById("div9").moveEnable=false;break;
case "div9":document.getElementById("div8").moveEnable=false;break;
}
}
}
} function handleClick(oDiv){
if(oDiv.moveEnable==true){
oRelatedTarget=oDiv;
var str1=oDropTarget.innerHTML;
var str2=oRelatedTarget.innerHTML;
oDropTarget.innerHTML=str2;
oRelatedTarget.innerHTML=str1;
setMoveEnable();
}
} function showFinalImg(){
var oDiv=document.getElementById("showFinalImg");
oDiv.style.display="block";
}
function closeShowFinalImg(){
var oDiv=document.getElementById("showFinalImg");
oDiv.style.display="none";
} </script>
</body>
</html>
解决方案 »
- hibernate 中插入,修改,删除的问题
- 请教一个逻辑判断问题?
- 谁有fckeditor.java的fckeditor2.3.zip这个包!
- 关于 log4j的问题
- 高手救急.在java,JTextField里输入的检查函数.
- applet和servlet通信时,applet得到servlet传来的图片文件流后,如何显示?
- 网页的进度条问题(急!!!!)
- jsp与mysql连接事,。jsp页中,通过什么读去db.properties的值呢? xiexie
- 困扰好久了还是没有解决!!下载头信息的设置!!!!一定加分
- 高分查询javax.management包,
- org.apache.axis.client.Service的问题
- Applet程序通过html页面传递参数的错误问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>无标题文档</title>
</head><body>
<form action="" id="f1" method="post">
<table border="10">
<tr>
<td><div id="div1" onclick="handleClick(this)"><img src="01.jpg" width="200" height="200"/></div></td>
<td><div id="div2" onclick="handleClick(this)"><img src="02.jpg" width="200" height="200"/></div></td>
<td><div id="div3" onclick="handleClick(this)"><img src="03.jpg"width="200" height="200"/></div></td>
<td><div id="div4" onclick="handleClick(this)"><img src="04.jpg" width="200" height="200"/></div></td>
<td><div id="div13" onclick="handleClick(this)"></div></td>
</tr>
<tr>
<td><div id="div5" onclick="handleClick(this)"><img src="05.jpg"width="200" height="200"/></div></td>
<td><div id="div6" onclick="handleClick(this)"><img src="06.jpg"width="200" height="200"/></div></td>
<td><div id="div7" onclick="handleClick(this)"><img src="07.jpg" width="200" height="200"/></div></td>
<td><div id="div8" onclick="handleClick(this)"><img src="08.jpg"width="200" height="200" /></div></td>
<td align="left" ><input type="button" value="游戏开始" onclick="createNewGame()" /><br />
<br /><br /><br /><br />
<input type="submit" value="还原游戏" /></td>
</tr>
<tr>
<td><div id="div9" onclick="handleClick(this)"><img src="09.jpg" width="200" height="200"/></div></td>
<td><div id="div10" onclick="handleClick(this)"><img src="10.jpg" width="200" height="200"/></div></td>
<td><div id="div11" onclick="handleClick(this)"><img src="11.jpg"width="200" height="200"/></div></td>
<td><div id="div12" onclick="handleClick(this)"><img src="12.jpg" width="200" height="200"/></div></td>
<td ><img src="yuantu.jpg" width="200" height="200"/></td>
</tr>
</table>
</form><script type="text/javascript">
function createNewGame(){
var array = new createRandomArray();
for(var i=1;i<13;i++){
var oDiv=document.getElementById("div"+i).innerHtml='<img src="array[i]+"jpg">';
//var imgUrl=""+array[i-1]+"jpg";
//oDiv.innerHtml='<img src="array[i-1]+"jpg">';}
var oDiv13=document.getElementById("div13");
oDiv13.innerHTML="";
setMoveEnable();
}function createRandomArray(){
var array = new Array();
for(var i=1;i<13;i++){
array.push(i);
}array.sort(mysort);
return array;
}function mysort(a,b){
var tmp = Math.round(Math.random()*11)+1;
return tmp?a-b:b-a;
}function setMoveEnable(){
for(var k=1;k<=13;k++){
var oDiv = document.getElementById("div"+k);
oDiv.moveEnable=false;
}for(var i=1;i<=13;i++){
var oDiv=document.getElementById("div"+i);
if(oDiv.innerHTML==""){
oDropTarget=oDiv;
oDivEnable1=document.getElementById("div"+eval(i-1));
oDivEnable2=document.getElementById("div"+eval(i+1));
oDivEnable3=document.getElementById("div"+eval(i-4));
oDivEnable4=document.getElementById("div"+eval(i+4));
for(var j=1;j<=4;j++){
var oDivEnable=eval("oDivEnable"+j);
if(oDivEnable!=null){
oDivEnable.moveEnable=true;
}
}
switch(oDiv.id){
case "div4":document.getElementById("div5").moveEnable=false;break;
case "div5":document.getElementById("div4").moveEnable=false;break;
case "div8":document.getElementById("div9").moveEnable=false;break;
case "div9":document.getElementById("div8").moveEnable=false;break;
}
}
}
} function handleClick(oDiv){
if(oDiv.moveEnable==true){
oRelatedTarget=oDiv;
var str1=oDropTarget.innerHTML;
var str2=oRelatedTarget.innerHTML;
oDropTarget.innerHTML=str2;
oRelatedTarget.innerHTML=str1;
setMoveEnable();
}
} function showFinalImg(){
var oDiv=document.getElementById("showFinalImg");
oDiv.style.display="block";
}
function closeShowFinalImg(){
var oDiv=document.getElementById("showFinalImg");
oDiv.style.display="none";
} </script>
</body>
</html>
排除了两处 报错,
不明白楼主的意思