?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 ?拼图（未优化版）
原文地址：https://www.cnblogs.com/wcx-20151115-hzz/p/10098593.html