<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. wpf中xps文档合并功能实现

    跟着上一篇的xps文档套打的文章,近期一直在研究xps打印技术,其中用户提到了一个需求,要求能够多页面进行打印,我的想法是,先生成xps文件,然后将文件读取出来以后,合并成一个文件来处理. 如果要是直 ...

  2. TypeScript开发程序

    使用TypeScript开发程序 简介 TypeScript一直发展不错,我们公司在开发新功能时,考虑到程序的可维护性,使用了TypeScript编写浏览器上的程序,我们是从零开始使用TypeScri ...

  3. TLS之上的HTTP

    1.介绍 HTTP[RFC2616]最初是在INTERNET上不用密码的应用.但随着HTTP的敏感性应用日益增加,对安全性的要求也随之增加.SSL及其后继TLS[RFC2246]提供了面向通道的安全性 ...

  4. js闭包和ie内存泄露原理

    也议 js闭包和ie内存泄露原理 可以, 但小心使用. 闭包也许是 JS 中最有用的特性了. 有一份比较好的介绍闭包原理的文档. 有一点需要牢记, 闭包保留了一个指向它封闭作用域的指针, 所以, 在给 ...

  5. ios缩放图片

    http://blog.csdn.net/yanfangjin/article/details/7456681

  6. 简单实现android和wp聊天

    使用Beetle.NetPackage简单实现android和wp聊天 Beetle.NetPackage是一个多台平开源Client TCP通讯组件,它针对不同平台提供统一的消息描述规则和使用规范可 ...

  7. WPF 自定义 MessageBox (相对完善版)

    WPF 自定义 MessageBox (相对完善版)     基于WPF的自定义 MessageBox. 众所周知WPF界面美观.大多数WPF元素都可以简单的修改其样式,从而达到程序的风格统一.可是当 ...

  8. Javascript单元测试框架比较Qunit VS Jasmine

    Javascript单元测试框架比较Qunit VS Jasmine 工欲行其事必先利其器,好的单元测试框架是TDD成功的一半.Javascript优秀的测试框架很多, 包括Jasmine,Qunit ...

  9. Ubuntu snappy is lame

    ubuntu has just announced that snappy will replace 'apt' as the next generation of package manager f ...

  10. 【OpenMesh】使用迭代器和循环机

    原文出处: http://openmesh.org/Documentation/OpenMesh-Doc-Latest/tutorial.html 这个例子展现: 如何使用迭代器 如何使用循环机 这个 ...