Question

我有30个具有不同图像和链接的div，并希望让它们随机显示在10个不同的div中。

示例：http://imgur.com/Ar1gdzL（这是一个动画gif）

我们在wordpress中使用的“随机相关帖子”，但我的页面不在wordpress中。它只是一个简单的PHP网站。

div会是这样的链接链接链接等等等等等

如何在javascript或php中执行此操作？

Answer 1

使用这些位置创建10个div（空div）

使用10个（或更多）html内容创建一个字符串数组，该内容将填充div

按照所述here

对阵列进行随机播放

通过数组并逐个修改10个div的innerHtml（只有前10个元素，因为只有10个div）

Answer 2

您可以根据需要使用不同的方式。使用MySQL时，您可以使用如下查询：

SELECT images, link FROM tablename WHERE ...... ORDER BY RAND()

或者你可以在数组上使用shuffle。

$array = array ( 'image1', 'image2' );
shuffle ( $array );

// Display divs

Answer 3

<div class="divPool">content 1</div>
<div class="divPool">content 2</div>
<div class="divPool">content 3</div>

等......到30 divs

<div class="destination">destination 1</div>
<div class="destination">destination 2</div>
<div class="destination">destination 3</div>

等。 10个div，

然后在JavaScript中：

    //make arrays of the html elements in each class:
    var arrayOfContent=document.getElementsByClassName("divPool");
    var arrayOfDestinations=document.getElementsByClassName("destination");

    for (var i=0; i<10: i++){//for each of the 10 destination divs

    //select a random number from 0 to 29
    var random=Math.floor(Math.random() * 30);

    arrayOfDestinations[i].innerHTML=arrayOfContent[random].innerHTML
    }

另外，在css中你可以使divPool类看不见：

.divPool{display:none}

Answer 4

＆＃13;

{{1}}

＆＃13;

`

javascript或php中的随机帖子

4 个答案: