管在無序列表標題和隨機物品

Question

我有我的首頁上的文章列表，着有「更多」鏈接，直接到文章頁面：

<div class="articles_list"> 
 
<ul> 
 
    <li>Article 1</li> 
 
    <li>Article 2</li> 
 
    <li>Article 3</li> 
 
    <li>Article 4</li> 
 
</ul> 
 
    <div class="clear"></div> 
 
    <div class="more"><a href="articles.html">and more...</a></div> 
 
</div>

我想改變標題，因爲我有4篇以上的文章，並隨時對它們進行隨機化處理，而無需自己輸入。 例如，列表可能是：

<div class="articles_list"> 
 
<ul> 
 
    <li>Article 5</li> 
 
    <li>Article 1</li> 
 
    <li>Article 8</li> 
 
    <li>Article 4</li> 
 
</ul> 
 
    <div class="clear"></div> 
 
    <div class="more"><a href="articles.html">and more...</a></div> 
 
</div>

有什麼辦法，我可以做到這一點？

Answer 1

這裏需要編寫一些腳本。我在這裏準備了一篇文章列表（13）。同樣，arr（數組）需要包含您擁有的文章列表。休息都是動態代碼，它會隨機選擇文章。

var arr = ['Article 1','Article 2','Article 3','Article 4','Article 5','Article 6','Article 7','Article 8','Article 9','Article 10','Article 11','Article 12','Article 13' ]; 
 

 

 
//Prepare 4 random articles. 
 
var finalList = []; 
 
var i = 0; 
 
var node = document.getElementById('ulArticle'); 
 
while(true){ 
 
    var randomNo = Math.floor(Math.random() * arr.length); 
 
    var art = arr[randomNo]; 
 
    if(finalList.indexOf(art) == -1){ 
 
    finalList.push(art); 
 
    node.innerHTML += '<li>'+art+'</li>'; 
 
    i++; 
 
    } 
 
    if(i >= 4){ 
 
    break; 
 
    } 
 
} 
 

 

<div class="articles_list"> 
 
<ul id="ulArticle"> 
 
    
 
</ul> 
 
    <div class="clear"></div> 
 
    <div class="more"><a href="articles.html">and more...</a></div> 
 
</div>