HTML+CSS +JS 拼图(未优化版)

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7  #left, #right{ 8  width: 600px; 9  height: 600px; 10 float: left; 11  border: 1px solid cyan; 12  margin: 40px; 13  } 14  15  #right div{ 16  width: 100px; 17  height: 100px; 18 float: left; 19  background: palegoldenrod; 20  } 21  22  .imgFloat{ 23 float: left; 24  } 25 </style> 26 </head> 27 <body> 28  29  30 <div id="left"> 31  32 </div> 33 <div id="right"> 34 <div id="p1"></div> 35 <div id="p2"></div> 36 <div id="p3"></div> 37 <div id="p4"></div> 38 <div id="p5"></div> 39 <div id="p6"></div> 40 <div id="p7"></div> 41 <div id="p8"></div> 42 <div id="p9"></div> 43 <div id="p10"></div> 44 <div id="p11"></div> 45 <div id="p12"></div> 46 <div id="p13"></div> 47 <div id="p14"></div> 48 <div id="p15"></div> 49 <div id="p16"></div> 50 <div id="p17"></div> 51 <div id="p18"></div> 52 <div id="p18"></div> 53 <div id="p20"></div> 54 <div id="p21"></div> 55 <div id="p22"></div> 56 <div id="p23"></div> 57 <div id="p24"></div> 58 <div id="p25"></div> 59 <div id="p26"></div> 60 <div id="p27"></div> 61 <div id="p28"></div> 62 <div id="p29"></div> 63 <div id="p30"></div> 64 <div id="p31"></div> 65 <div id="p32"></div> 66 <div id="p33"></div> 67 <div id="p34"></div> 68 <div id="p35"></div> 69 <div id="p36"></div> 70 </div> 71  72 <script> 74 var arr= []; 75 arr[0] = Math.floor(Math.random()*36+1); 76 var flag = false; 77 for(var i = 0; i < 35; i++){ 78 while(1){ 79 var rand = Math.floor(Math.random()*36+1); 80 for(var j = i; j>=0; j--){ 81 if(rand == arr[j]){ 82 flag = true; 83  } 84  } 85 if(flag == false){ 86 arr[i+1] = rand; 87 break; 88  } 89 flag = false; 90  } 91  } 92  93 for(var i = 0; i<36; i++){ 94 var left = document.getElementById("left"); 95 var img1 = document.createElement("img"); 96 img1.src = "img/timg_" + arr[i]+ ".png"; 97 img1.className = "imgFloat"; 98  left.appendChild(img1); 99  }100 101 document.ondragstart = function(e){102 obj = e.target;103  }104 105 document.ondragover = function(e){106  e.preventDefault();107 108  }109 110 document.ondrop = function(e){111  e.target.appendChild(obj)112  }113 114 </script>115 </body>116 </html>

 

相关文章