js数组操作-打乱数组
<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数组操作-打乱数组的更多相关文章
- ES6-新增的数组操作,数组解构,forEach,fillter,some.map的数组遍历,数组转换字符串
ES6-新增的数组操作 // es6数组格式 let json = { '0' : 'anan', '1' : 'anani', '2' : 'anania', length:3 } //es6 把数 ...
- JavaScript jQuery 中定义数组操作及数组操作
1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象 Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),所以数组可以通过相互嵌套实现类似多维 ...
- PHP数组操作——获取数组最后一个值的方法
php开发过程中,可能经常需要对取出的数组要获取数组的最后健或值.在这里总结了三个方法,并且跟据他们三个方法在一些情况下如何使用的条件限制进行了说明. <?php $array=array(1, ...
- js简易随机打乱数组方法
打乱随机数算法很多,不过看这个还挺简便的,记录下来. function shuffle(a) { var len = a.length; for(var i=0;i<len;i++){ var ...
- Scala编程入门---数组操作之数组转换
使用yield和函数式编程转换数组 //对Array进行转换,获取的还是Aarry val a = Array(1,2,3,4,5) val a2 = for(ele <- a) yield e ...
- Scala 数组操作之数组转换
使用yield和函数式编程转换数组 // 对Array进行转换,获取的还是Array val a = Array(1, 2, 3, 4, 5) val a2 = for (ele <- a) y ...
- PHP内核探索之变量(4)- 数组操作
上一节(PHP内核探索之变量(3)- hash table),我们已经知道,数组在PHP的底层实际上是HashTable(链接法解决冲突),本文将对最常用的函数系列-数组操作的相关函数做进一步的跟踪. ...
- [转]javascript之数组操作
javascript之数组操作 .数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个 ...
- Numpy数组操作
""" Numpy 数组操作 修改数组形状 函数 描述 reshape 不改变数据的条件下修改形状 flat 数组元素迭代器 flatten 返回一份数组拷贝,对拷贝所做 ...
随机推荐
- c#一个简单的实例告诉你,多继承还可以这么来
我想多继承,要怎么搞???我想你一定会说“接口”,那么你有没有遇到这样的问题,你需要在一个类中继承另外2个类的所有方法,你要怎么做呢???难道要Coyp实现代码?No,往下看... 定义一个空接口比如 ...
- sequence diagram
[UML]UML系列——时序图(顺序图)sequence diagram 系列文章 [UML]UML系列——用例图Use Case [UML]UML系列——用例图中的各种关系(include.exte ...
- [转]How to build a data storage and VM Server using comodity hardware and free software
Source: http://learnandremember.blogspot.jp/2010_01_01_archive.html Requisites: 1) RAID protection f ...
- 关于Jquery 序列化表单的注意事项
在JQuery 的serialize方法序列化表单的过程中,如果表单的name值最后有空格,会出现“+”号,查源码可见原因.这一小问题就浪费了半小时的时间,记录下来,备忘.
- Make Things Move -- Javascript html5版(三)三角函数形式的动画
角度制和弧度制 生活中通常是用角度度来理解的,代码里都是用弧度制来计算. 角度转弧度:DEG_TO_RAD = Math.PI / 180 弧度装角度:RAD_TO_DEG = 180 / Math. ...
- WordPress 4.3.1正式发布 修复了3个安全问题
WordPress 4.3.1正式发布 修复了3个安全问题! 出于安全性考虑,建议大家进行升级! WordPress 4.3.1 安全维护版本已经发布,该版本是针对之前所有版本的安全更新,强烈建议大 ...
- C# 枚举常用工具方法
/// <summary> /// 获取枚举成员描述信息及名称 /// 返回:IDictionary /// Value:描述信息 /// Key:值 /// </summary&g ...
- 在路由器上搭建SVN服务器
在路由器上搭建SVN服务器 SVN托管服务大家都不陌生了,我最早开始用的是谷歌提供的SVN,因为在上面托管的项目都是开源的,所以当有些项目不方便在网上公开的时候,就需要自己搭建SVN服务器了.wind ...
- Your personal Mail Server iRedMail on ubuntu14.04 x64
what we have? iRedMail -> http://iredmail.com Get the script over there. http://www.ired ...
- Java乔晓松-android中的帧动画FrameByFrame
先看效果后上代码: 动画开始---- 动画切换的界面---- 动画播放完毕后的跳转界面----- 重要的方法: imageView.setBackgroundResource(R.anim.frame ...