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>
posted on 2018-12-10 19:37 薇依阅读(244) 评论(0) 编辑收藏举报