Question

我的主页上有一个文章列表，其中有一个＆＃34;阅读更多＆＃34;链接到文章页面：

＆＃13;

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

＆＃13;

我想更改标题，因为我有超过4篇文章，并且不时随机化它们，而不必自己输入。例如，列表可以是：

＆＃13;

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

＆＃13;

我有什么方法可以做到吗？

Answer 1

这里需要一些脚本。我在这里准备了一份文章清单（13）。类似地，arr（Array）需要包含您拥有的文章列表。休息全是动态代码，它以随机顺序挑选文章。

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>

管道无序列表标题并随机化项目

1 个答案: