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

 更新时间:2015年08月11日 09:45:15   投稿:hebedich  
本文实例讲述了javaScript数组随机排列实现随机洗牌功能的方法。分享给大家供大家参考。

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

代码如下:

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

相关文章

  • js blob类型url的视频下载问题的解决

    js blob类型url的视频下载问题的解决

    这篇文章主要介绍了js blob类型url的视频下载问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • js纯数字逐一停止显示效果的实现代码

    js纯数字逐一停止显示效果的实现代码

    下面小编就为大家带来一篇js纯数字逐一停止显示效果的实现代码。小编觉得非常不错。现在分享给大家。给大家一个参考
    2016-03-03
  • webpack自动引入打包资源HtmlWebpackPlugin的实现

    webpack自动引入打包资源HtmlWebpackPlugin的实现

    本文主要介绍了webpack自动引入打包资源HtmlWebpackPlugin的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • 如何用JavaScript实现一个数组惰性求值库

    如何用JavaScript实现一个数组惰性求值库

    这篇文章主要介绍了如何用JavaScript实现一个数组惰性求值库,对惰性求值感兴趣的同学,可以参考下
    2021-05-05
  • JS实现简单的点赞与踩功能示例

    JS实现简单的点赞与踩功能示例

    这篇文章主要介绍了JS实现简单的点赞与踩功能,涉及javascript针对页面元素动态操作相关实现技巧,需要的朋友可以参考下
    2018-12-12
  • JS实现简易计算器

    JS实现简易计算器

    这篇文章主要为大家详细介绍了JS实现简易计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • ES6 Symbol数据类型的应用实例分析

    ES6 Symbol数据类型的应用实例分析

    这篇文章主要介绍了ES6 Symbol数据类型的应用,结合实例形式分析了ES6 Symbol数据类型的功能、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-06-06
  • 如何通过setTimeout理解JS运行机制详解

    如何通过setTimeout理解JS运行机制详解

    这篇文章主要给大家介绍了关于如何通过setTimeout理解JS运行机制的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • 微信小程序MoxB实现全局状态管理流程详解

    微信小程序MoxB实现全局状态管理流程详解

    这篇文章主要介绍了微信小程序使用MoxB实现全局状态管理方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-11-11
  • JavaScript中如何计算字符串文本的宽度

    JavaScript中如何计算字符串文本的宽度

    这篇文章主要介绍了JavaScript中如何计算字符串文本的宽度问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02

最新评论