想实现点击开始   整个拼图图片随机排序   可是没有实现   请大家帮忙<!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>

解决方案 »

  1.   


    <!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>
    排除了两处 报错,
    不明白楼主的意思