HTML+CSS +JS 拼图（未优化版）
Posted 薇依
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于HTML+CSS +JS 拼图（未优化版）的主要内容，如果未能解决你的问题，请参考以下文章