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中的document.open()方法使用介绍
Oct 09 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
JavaScript 异步调用
Oct 25 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
vue 开发之路由配置方法详解
Dec 02 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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
多php服务器实现多session并发运行
2006/10/09 PHP
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
JS实现HTML标签转义及反转义
2020/04/14 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
python删除过期文件的方法
2015/05/29 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
使用python实现省市三级菜单效果
2016/01/20 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
python实现桌面壁纸切换功能
2019/01/21 Python
Python continue语句实例用法
2020/02/06 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
荷兰超市:DEEN
2018/03/14 全球购物
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
机械设计毕业生自荐信
2014/02/02 职场文书
大家访活动实施方案
2014/03/10 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
《金子》教学反思
2014/04/13 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
校运会广播稿
2015/08/19 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers