javascript实现数组中的内容随机输出


Posted in Javascript onAugust 11, 2015

有时候我们可能需要从数组中随机抽出一项内容,下面就通过一段代码实例介绍一下如何实现此效果。

代码如下:

<script type="text/JavaScript"> 
var theArray=new Array();
theArray[0]="三水点靠木";
theArray[1]="三水点靠木一";
theArray[2]="三水点靠木二";
theArray[3]="三水点靠木三";
theArray[4]="三水点靠木四";
theArray[5]="三水点靠木五";
theArray[6]="三水点靠木六";
function ranFun()
{
 return parseInt(Math.random()*7);
}
document.write(theArray[ranFun()]);
</script>

以上代码可以随机输出数组中的元素,代码非常的简单,通过使用随机数函数为数组提供一个随机的索引即可。

从数组随机读取N条不同数据

方法一

var ary = new Array();
var xiaowu=new Array(
“1我的
“,
“2我的
“,
“3我的
“,
“4我的
“,
“5我的
“,
“6我的
“,
“7我的
“,
“8我的
“,
“9我的
“,
“10我的
“,
“11我的
“,
“12我的
“,
“13我的
“,
“14我的
“,
“15我的
“,
“16我的
“,
“17我的
“,
“18我的
“,
“19我的
“,
“20我的
”
);
var s01=xiaowu.length
while(ary.length < 6)
{
var tmp =xiaowu[parseInt(Math.random()*s01)]
var b = false;
for (var i=0; i<ary.length; i++)
{
if (ary[i] == tmp)
{
b = true;
break;
}
}
if (!b)
ary[ary.length] = tmp;
}
document.write(ary[0]);
document.write(ary[1]);
document.write(ary[2]);
document.write(ary[3]);
document.write(ary[4]);
document.write(ary[5]);

方法二

//从一个给定的数组arr中,随机返回num个不重复项
function getArrayItems(arr, num) {
//新建一个数组,将传入的数组复制过来,用于运算,而不要直接操作传入的数组;
var temp_array = new Array();
for (var index in arr) {
temp_array.push(arr[index]);
}
//取出的数值项,保存在此数组
var return_array = new Array();
for (var i = 0; i<num; i++) {
//判断如果数组还有可以取出的元素,以防下标越界
if (temp_array.length>0) {
//在数组中产生一个随机索引
var arrIndex = Math.floor(Math.random()*temp_array.length);
//将此随机索引的对应的数组元素值复制出来
return_array[i] = temp_array[arrIndex];
//然后删掉此索引的数组元素,这时候temp_array变为新的数组
temp_array.splice(arrIndex, 1);
} else {
//数组中数据项取完后,退出循环,比如数组本来只有10项,但要求取出20项.
break;
}
}
return return_array;
}

//测试
var ArrList=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33];
alert(getArrayItems(ArrList,6));

这段JS代码可以对数组内的元素进行随机排列,这个非常有用,比如我们在玩扑克牌的时候可以让扑克牌进行排列,也就是电脑洗牌。

Javascript 相关文章推荐
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
javascript弹出拖动窗口
Aug 11 #Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 #Javascript
javascript实现五星评价代码(源码下载)
Aug 11 #Javascript
jQuery的remove()方法使用详解
Aug 11 #Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 #Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 #Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 #Javascript
You might like
Yii2框架中日志的使用方法分析
2017/05/22 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
建筑经济管理专业求职信分享
2014/01/06 职场文书
办理暂住证介绍信
2014/01/11 职场文书
军人违纪检讨书
2014/02/04 职场文书
母亲节感恩寄语
2014/02/21 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang