<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. c# 自定义多选下拉列表2

    以下为工作中遇到的,备注一下 先需要几个辅助类 #region GripBounds using System.Drawing; internal struct GripBounds { ; ; pu ...

  2. Helper Method

    ASP.NET MVC 小牛之路]13 - Helper Method 我们平时编程写一些辅助类的时候习惯用“XxxHelper”来命名.同样,在 MVC 中用于生成 Html 元素的辅助类是 Sys ...

  3. Effective C++ 读书总结

    (中文第三版 侯捷 译) 这本书在C++领域也是大名鼎鼎,在微博看到有人说,如果以前学过C语言,那只需花一天时间把 Effective C++ 看一遍,然后再看 leveldb代码(http://t. ...

  4. NSSortDescriptor(数组排序)

    如果数组里面的每一个元素都是一个个model,例如 DepartsDate.h文件 [plain] view plaincopy #import <Foundation/Foundation.h ...

  5. Cocos2d学习之路三(使用Zwoptex创建精灵表单和CCAnimate动画)

    创建精灵表单: 创建动画先要把图片整合到一个图片上然后生成plist文件: 方法下载Zwoptex软件:http://www.zwopple.com/zwoptex/ 然后打开选择 create ne ...

  6. 64位下Hook NtOpenProcess的实现进程保护 + 源码 (升级篇 )

    64位下Hook NtOpenProcess的实现进程保护 + 源码 (升级篇 ) [PS: 如果在64位系统下,出现调用测试demo,返回false的情况下,请修改Hook Dll的代码] glhH ...

  7. cocos2d-x 实现跨平台的目录遍历

    可能各位看官们有更好的方法,请不吝赐教. #ifdef _WIN32 #include <io.h> #else #include <unistd.h> #include &l ...

  8. xml数据解析

    xml数据解析 在iPhone开发中,XML的解析有很多选择,iOS SDK提供了NSXMLParser和libxml2两个类库,另外还有很多第三方类库可选,例如TBXML.TouchXML.Kiss ...

  9. 第一个windows 小游戏 贪吃蛇

    最近用dx尝试做了一个小的贪吃蛇游戏,代码放到github上面:https://github.com/nightwolf-chen/MyFreakout 说一下自己实现的过程: 首先,我把蛇这个抽象成 ...

  10. TFS的安装

    TFS的安装 本系列的实例将采用TFS 2012+Sql Server2012编写. TFS的完整版本安装最好是在Windows server2008 64位以上版本中,其包括64位的SQL SERV ...