Javascript - 从数组中选择随机页面但是从不显示两次页面

时间:2014-12-09 13:21:42

标签: javascript arrays iframe random

我有一段代码从一个包含X ammount URL的数组中随机选择一个页面,在一段时间内将其显示在iframe中并持续重复此过程:

<script type="text/javascript">
var pages=new Array();
pages[0]="01.html";
pages[1]="02.html";
pages[2]="03.html";
pages[3]="04.html";
pages[4]="05.html";
pages[5]="06.html";
pages[6]="07.html";
pages[7]="08.html";
pages[8]="09.html";
pages[9]="10.html";
pages[x]="etc.html";

var time=33000; // this is set in milliseconds
function pageChange() {
var rand=Math.floor(Math.random()*pages.length);
document.getElementById("frame").src=pages[rand];
setTimeout("pageChange()",time);
}
onload=pageChange;
</script>

<iframe id="frame" src="" width="870px" height="488px" hspace="0" vspace="0" frameborder="1" scrolling="no" ></iframe>

现在我希望它能够选择一个随机页面,但是在显示一个页面之后它将不会再次显示,直到整个数组已经传播。基本上就像盲目地从牌组中抽出牌子一样,直到所有的牌都被挑了一次,然后一副又一遍地抽牌......

有人知道它是如何在上面的代码中实现的吗?任何帮助或建议都将不胜感激。

[编辑:] 从下面输入后,代码如下所示:

<script type="text/javascript">
var pages=new Array();
pages[0]="01.html";
pages[1]="02.html";
pages[2]="03.html";
pages[3]="04.html";



var shuffle = function(){
         var shuffledPages = [];

         while(pages.length > 0){
             shuffledPages.push( pages.splice(Math.floor( pages.length * Math.random() ), 1)[0] );  
         }

         return shuffledPages;
 }

var time=10000; 
var currentIndex = 0; 

function pageChange() { 
    if(currentIndex == pages.length - 1){ 
        pages = shuffle(); 
        currentIndex = 0; 
    } 
    else{ 
        currentIndex++; 
    } 

    document.getElementById("frame").src=pages[currentIndex]; 
    setTimeout("pageChange()",time); 
}

onload=pages = shuffle();
onload=pageChange;

</script>

<iframe id="frame" src="" width="870px" height="488px" hspace="0" vspace="0" frameborder="1" scrolling="no" ></iframe>

它似乎可以解决这个问题,但序列发生了一些奇怪的事情。我注意到这些序列显示为:[1,2,3,4] [2,1,2,1] [4,3,1,2] [4,2,4,3] [1,3 ,4,2] [1,1,2,3] [4,2,3,1] [4,4,1,2]。

2 个答案:

答案 0 :(得分:2)

如果您不想保留整个数组,可以使用splice()删除已从数组中选择的元素。

pages.splice(rand, 1);

那应该从数组中删除所选页面。

如果你想保留整个阵列,你可以创建一个&#34;备份&#34;阵列。

答案 1 :(得分:1)

创建一个shuffle函数,遍历数组,当你到达数组的末尾时,再次对页面进行洗牌。

 var shuffle = function(){
         var shuffledPages = [];

         /*The first time rand is used, it will not allow you to pick the last value used last time.*/
         var rand = Math.floor((pages.length - 1) * Math.random());

         while(pages.length > 0){
             shuffledPages.push( pages.splice( rand , 1)[0] );  
             rand = Math.floor(pages.length * Math.random());
         }

         return shuffledPages;
 }

你可以这样称呼它:

 pages = shuffle();

那么你可以写下其余的代码:

var time=33000; 
var currentIndex = 0; 
var lastValue = null;

var pageChange = function() { 
    if(currentIndex == pages.length - 1){ 
        pages = shuffle(); 
        currentIndex = 0; 
    } 
    else{ 
        currentIndex++; 
    } 

    document.getElementById("frame").src=pages[currentIndex]; 
    setTimeout("pageChange()",time); 
}

pageChange();