<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. ios学习笔记之UIControl解读

    UIControl,相信大家对其并不陌生吧,比如平常最常用的UIButton就是继承自UIControl的.按照惯例,还是先来看看为什么有UIControl这个类?什么时候用到它? 查下文档就可以看到 ...

  2. 输出一个string的所有排列情况

    问题: 1.加入输入是{a,b,c}; 2.输出abc,acb,bac,bca,cab,cba; 代码描述: 1.递归遍历所有情况 2.方法FUN输入为:要排列的字符串char inp[];inp[] ...

  3. ${pageContext.request.contextPath}的作用

    刚开始不知道是怎么回事,在网上也查找了一些资料,看了还是晕. 看了另一个大侠的,终于有了点眉目. 那位大侠在博客中这样写道“然后在网上找,更让我郁闷的事,TMD!网上“抄袭”的真多啊!而且扯了一大堆! ...

  4. (转)JS中公共/私有变量和方法

    私有变量 在对象内部使用'var'关键字来声明,而且它只能被私有函数和特权方法访问. 私有函数 在对象的构造函数里声明(或者是通过var functionName=function(){...}来定义 ...

  5. MYSQL 分表实践

    基本条件: 无索引 主表 test_0 数据:一百万条  数据库引擎 InnoDb 分表 test_1...test_100 数据 每张一万条,一共一百万条  数据库引擎 InnoDb 流程: 主表中 ...

  6. asp.net MVC 路由机制

    1:ASP.NET的路由机制主要有两种用途: -->1:匹配请求的Url,将这些请求映射到控制器 -->2:选择一个匹配的路由,构造出一个Url 2:ASP.NET路由机制与URL重写的区 ...

  7. sqlserver生成随机数 2011-12-21 15:47 QQ空间

    -创建视图 create view myview as select re=rand() --自定义函数:取得指定范围的随机数 create function mydata( @a int, @b i ...

  8. QT QTextBrowser

    1.0 MainWindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include<QMainWindow> #include<Q ...

  9. SmoOne——开源免费的企业移动OA应用,基于VS.Net

    一.SmoOne是什么一个开源的移动OA应用 二.语言.Net 三.开发环境Visual Studio 四.开发平台Smobiler Designer 五.功能该应用开源代码中包含注册.登录.用户信息 ...

  10. Oracle / PLSQL函数 - NUMTODSINTERVAL和NUMTOYMINTERVAL

    最近在学习数据库方面的知识,做个标记. 这里有英文解释,建议多看看英文文档: https://www.techonthenet.com/oracle/functions/ 下面开始记录一下,自己在Or ...