tuyaux dans les titres de la liste désordonnées et randomize articles

Question

J'ai une liste d'articles sur ma page d'accueil, avec un lien « en savoir plus » pour diriger vers la page des articles:

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

Je veux pour changer les titres, car j'ai plus de 4 articles, et les randomiser de temps en temps, sans avoir à les taper moi-même. Par exemple, la liste pourrait être:

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

Est-il possible que je puisse faire cela?

Answer 1

Vous avez besoin d'un peu de script ici .. J'ai préparé une liste d'articles ici (13). De même, arr (Array) doit contenir la liste des articles que vous avez. Repos tout est du code dynamique et il sélectionne les articles dans un ordre aléatoire.

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>