<style> html, body { margin: 0; padding: 0;} div span { display: inline-block; 25px; height: 25px; background: red; } </style>
<div id="wrap"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
需求:1、点击1个span,我所点击的span显示目标值(数组的一个任意值,随机的),其它5个span随机内容为数组的任意项,6个span显示的内容不能重复。
思想:1、生成一个没有重复数字的数组arr2,在这个数组中将任意两个数组项互换,从而打散数组。
2、在span上加入index属性,将目标值从数组中去掉,开始打散数组。
3、点击任意span, 取到当前span的index值,将目标值按这个index值插入到打散后的数组中。
4、对ospans进行for循环,将arr2的数组项赋给每个span的innerHTML.
<script> function shuffle(aArr) { // 打散数组函数 var iLength = aArr.length , i = iLength , nTemp , iRandom; while ( i-- ) { if (i !== (iRandom = Math.floor(Math.random()*iLength))) { // 不是同一个数组项的前提下进行互换 nTemp = aArr[i]; aArr[i] = aArr[iRandom]; aArr[iRandom] = nTemp; }; }; return aArr; }; var oSpans = document.getElementById("wrap").getElementsByTagName("span"); var arr2 = [1, 2, 3, 4, 5, 6]; var flag = true; for (var i = 0, len = oSpans.length; i < len; i++) { oSpans[i].index = i; oSpans[i].onclick = function() { var t = parseInt(Math.random(6)); // 目标坐标 var target = arr2[t]; // 目标值 arr2.splice(t, 1); // 将目标值从数组中删除 shuffle(arr2); // 数组随机排列 var index = this.index; // 获得点击后span的index arr2.splice(index, 0, target); //此时将target插入到arr2中 for (var i = 0, len = oSpans.length; i < len; i++) { oSpans[i].innerHTML = arr2[i]; }; }; }; </script>
今天看到了雨夜带刀的博客,附上地址:http://stylechen.com/grandomarr.html,我将两个方法结合了一下:
var arr = [], length = 100, i = 0; for( ; i < length; i++ ){ arr.push( i ); } var gRandomArr = function( arr, length ){ // 从原数组中一次性返回10个元素 var arr2 = arr.slice( 0, length ); // 使用sort将原数组的顺序打乱,让有序变成无序 arr2.sort(function(){ return Math.random() - 0.5; }); return arr2; }; // 调用 console.log(gRandomArr( arr, 10 ));