<style>
html, body { margin: 0; padding: 0;}
div span { display: inline-block; width: 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 ));

js数组操作-打乱数组的更多相关文章

  1. ES6-新增的数组操作,数组解构,forEach,fillter,some.map的数组遍历,数组转换字符串

    ES6-新增的数组操作 // es6数组格式 let json = { '0' : 'anan', '1' : 'anani', '2' : 'anania', length:3 } //es6 把数 ...

  2. JavaScript jQuery 中定义数组操作及数组操作

    1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象 Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),所以数组可以通过相互嵌套实现类似多维 ...

  3. PHP数组操作——获取数组最后一个值的方法

    php开发过程中,可能经常需要对取出的数组要获取数组的最后健或值.在这里总结了三个方法,并且跟据他们三个方法在一些情况下如何使用的条件限制进行了说明. <?php $array=array(1, ...

  4. js简易随机打乱数组方法

    打乱随机数算法很多,不过看这个还挺简便的,记录下来. function shuffle(a) { var len = a.length; for(var i=0;i<len;i++){ var ...

  5. Scala编程入门---数组操作之数组转换

    使用yield和函数式编程转换数组 //对Array进行转换,获取的还是Aarry val a = Array(1,2,3,4,5) val a2 = for(ele <- a) yield e ...

  6. Scala 数组操作之数组转换

    使用yield和函数式编程转换数组 // 对Array进行转换,获取的还是Array val a = Array(1, 2, 3, 4, 5) val a2 = for (ele <- a) y ...

  7. PHP内核探索之变量(4)- 数组操作

    上一节(PHP内核探索之变量(3)- hash table),我们已经知道,数组在PHP的底层实际上是HashTable(链接法解决冲突),本文将对最常用的函数系列-数组操作的相关函数做进一步的跟踪. ...

  8. [转]javascript之数组操作

    javascript之数组操作 .数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个 ...

  9. Numpy数组操作

    """ Numpy 数组操作 修改数组形状 函数 描述 reshape 不改变数据的条件下修改形状 flat 数组元素迭代器 flatten 返回一份数组拷贝,对拷贝所做 ...

随机推荐

  1. vijos1060 隔板法

    排列组合问题 之前没有学过隔板法,随便学习了一下 其实挺好理解的 附上题解: 先只考虑一种球:因为有n个盒子每个盒子可以放任意多球,还可以空出来任意多球.所以可以考虑为n+1个盒子,最后一个盒子里面是 ...

  2. Hive查询结果批量插入分区

    在hive的数据建表时,为了查询的高效性,我们经常会对表建立分区,例如下面的表 create external table dm_fan_photo_icf_basic(user string, it ...

  3. 无穷字符串问题--CSDN上的面试题(原创)

    网上看到一道奇怪的题,分享一下:http://hero.csdn.net/Question/Details?ID=307&ExamID=302 发布公司:CSDN 有 效 期:2014-02- ...

  4. EasyUI DataGrid及Pagination

    接上一篇EasyUI项目驱动学习 DataGrid数据表格及Pagination分页一起介绍 一.通过<table>标记创建DataGrid,嵌套<th>标签定义列表 < ...

  5. VS2012下使用Moq进行单元测试

    单元测试虽然是个很老的东西了,但平时写代码一般都不写测试,因为VS调试完全可以满足了,所以一直也就没有用过,刚好在<Pro.ASP.NET.MVC.3.Framework>中看到了Moq这 ...

  6. POJ 1873 The Fortified Forest

    题意:是有n棵树,每棵的坐标,价值和长度已知,要砍掉若干根,用他们围住其他树,问损失价值最小的情况下又要长度足够围住其他树,砍掉哪些树.. 思路:先求要砍掉的哪些树,在求剩下的树求凸包,在判是否可行. ...

  7. 有趣的win8进度条

    有趣的win8进度条 刚才在安装visual studio 12,发现它的安装界面都是win8风格的,而且安装的时候有个进度条,看着挺不错,就用 jquery 实现了一下,的确挺有趣: 点击停止效果 ...

  8. ios-王云鹤 把UIdatePicker 嵌入到 UIActionSheet中

    这里简单的解释一下: -(void) setUpDatePicker方法用于调用UIDatePicker -(void) DatePickerDoneClick:(id) sender方法用于实现隐藏 ...

  9. Android开发(19)---常见dialog对话框的运用

    Dialog是android开发过程中最常用到的组件之一,Dialog的创立办法有两种: 一是直接new一个Dialog目标,然后调用Dialog目标的show和dismiss办法来操控对话框的显现和 ...

  10. json文件报expected name at 1 1错误

    在eclipse编辑json文件时出现expected name at 1 1错误,解决方式如下: 方法一:json文件是不支持注释的,把所有/* content */删除即可 如果不想删除注释-- ...