<style type="text/css"> span{ display: block; float: left; width: 50px; height: 50px; border: 1px solid red; background-color: #000; } div{ width: 520px; height: 520px; margin: 0 auto; overflow: hidden; border: 1px solid red; } </style> <div></div> <button>start</button> <h1></h1> <script type="text/javascript"> var div=document.getElementsByTagName('div')[0]; var btn=document.getElementsByTagName('button')[0]; var h1=document.getElementsByTagName('h1')[0]; for(var i=1;i<34;i++){ var span=document.createElement('span'); span.innerHTML=i; div.appendChild(span); }; var spans=div.getElementsByTagName('span'); function white(obj){ obj.style.backgroundColor="#fff"; }; function sortNumber(a,b){ return a-b; }; function checkRepeat(num,arr){ for(var i=0,j=arr.length;i<j;i++){ if (num==arr[i]) { return false; }; }; return true; }; btn.onclick=function(){ // 初始化 h1.innerHTML=""; for(var i=0,j=spans.length;i<j;i++){ spans[i].style.backgroundColor="#000"; } // 循环的到6个数 var poor=[]; for(var i=0,j=6;i<j;i++){ var num=Math.floor(spans.length*Math.random()); if (checkRepeat(num,poor)) { poor.push(num); }else{ j++; }; }; // 排序 var poorSort=poor.sort(sortNumber); // 另一种高效排序 function quicksort(arr){ if (arr.length == 0) return []; var left = new Array(); var right = new Array(); var pivot = arr[0]; for (var i = 1; i < arr.length; i++) { if (arr[i] < pivot) { left.push(arr[i]); } else { right.push(arr[i]); } } return left.concat(pivot, right); // return quicksort(left).concat(pivot, quicksort(right)); } // var poorSort=quicksort(poor); // 显示数据 for(var i=0,j=poorSort.length;i<j;i++){ white(spans[poorSort[i]]); h1.innerHTML=h1.innerHTML+parseInt(poorSort[i]+1); if (i<j-1) { h1.innerHTML=h1.innerHTML+","; }; }; } </script>