在javascript或php中的隨機帖子

Question

我有30個不同的圖像和鏈接divs，並希望讓他們隨機顯示在10個不同的divs。

例子：http://imgur.com/Ar1gdzL（這是一個動畫GIF）

有點像「隨機相關的帖子」我們在wordpress的使用，但我的頁面是不是在WordPress的。這只是一個簡單的PHP網站。

股利會如此 鏈接 鏈接 鏈接 等 等 等

如何在JavaScript或php這樣做呢？

Answer 1

創建10周的div與那些位置（空的div）

創建具有10（或更多）的HTML內容的字符串數組，將填補的div

洗牌陣列如所陳述here

通過陣列並逐個修改10個div的innerHtml（僅10個div，因此只有前10個元素）

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的div

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

等10個申報單，

然後在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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
\t for(i=1;i<=10;i++){ 
 
\t \t var id = Math.floor(Math.random() * 30) + 1; 
 
\t \t $("#display_"+id).show(); 
 
\t }  
 
}); 
 
</script> 
 
<div id="display_1" style="display:none;">1</div> 
 
<div id="display_2" style="display:none;">2</div> 
 
<div id="display_3" style="display:none;">3</div> 
 
<div id="display_4" style="display:none;">4</div> 
 
<div id="display_5" style="display:none;">5</div> 
 
<div id="display_6" style="display:none;">6</div> 
 
<div id="display_7" style="display:none;">7</div> 
 
<div id="display_8" style="display:none;">8</div> 
 
<div id="display_9" style="display:none;">9</div> 
 
<div id="display_10" style="display:none;">10</div> 
 
<div id="display_11" style="display:none;">11</div> 
 
<div id="display_12" style="display:none;">12</div> 
 
<div id="display_13" style="display:none;">13</div> 
 
<div id="display_14" style="display:none;">14</div> 
 
<div id="display_15" style="display:none;">15</div> 
 
<div id="display_16" style="display:none;">16</div> 
 
<div id="display_17" style="display:none;">17</div> 
 
<div id="display_18" style="display:none;">18</div> 
 
<div id="display_19" style="display:none;">19</div> 
 
<div id="display_20" style="display:none;">20</div> 
 
<div id="display_21" style="display:none;">21</div> 
 
<div id="display_22" style="display:none;">22</div> 
 
<div id="display_23" style="display:none;">23</div> 
 
<div id="display_24" style="display:none;">24</div> 
 
<div id="display_25" style="display:none;">25</div> 
 
<div id="display_26" style="display:none;">26</div> 
 
<div id="display_27" style="display:none;">27</div> 
 
<div id="display_28" style="display:none;">28</div> 
 
<div id="display_29" style="display:none;">29</div> 
 
<div id="display_30" style="display:none;">30</div>

`