Personnaliser votre site Web avec des affichages de texte aléatoires

Le message « Où aller ensuite ? » La section de mon site Web comprend une petite histoire dans le pied de page qui aide les visiteurs à explorer les pages semi-cachées et à partir à l'aventure (inspirée de Manuel). J'y mentionne mes types de café préférés, en me connectant à ma page Achetez-moi un café. Si vous avez prêté une attention particulière à cette section, vous avez peut-être remarqué que les types de café sont sélectionnés aléatoirement à chaque chargement de la page.

Voici comment j'y suis parvenu :

Le HTML

La structure commence par cet extrait simple :

I’m a huge <span>



<p>The <span> element with the id random-coffee serves as the placeholder for displaying the coffee name. By default, it shows "caffè latte" in case JavaScript is disabled or unavailable.

<h3>
  
  
  The JavaScript
</h3>

<p>To make the magic happen, I added the following JavaScript code:<br>
</p>

<pre class="brush:php;toolbar:false">const coffees = ["caffè latte", "cappuccino", "flat white", "cortado", "latte macchiato"];
const randomCoffee = document.getElementById("random-coffee");
randomCoffee.innerText = coffees[Math.floor(Math.random() * coffees.length)];

Voici un aperçu du script :

1. Définir les options :
   
   La première ligne crée une liste appelée cafés, répertoriant cinq types de café. Vous pouvez personnaliser cette liste pour inclure vos propres favoris ou même la remplacer par des types de thé ou d'autres boissons.

2. Localisez l'espace réservé :
   
   La deuxième ligne utilise la fonction document.getElementById() pour localiser le élément dans le HTML par son identifiant unique, random-coffee.

3. Randomisez la sélection :
   
   La troisième ligne sélectionne un type de café aléatoire dans le tableau coffees à l'aide de la fonction Math.random() et met à jour le contenu textuel du champ élément avec le café sélectionné.

C'est ça!

Cette configuration simple affiche dynamiquement un nom de café différent à chaque fois que la page est chargée. Cela ajoute un peu de hasard et de personnalité à mon site.

Et maintenant, si vous voulez bien m'excuser, je pars déguster un caffè latte chaleureux et douillet !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!