管在无序列表标题和随机物品

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>