Personalisieren Sie Ihre Website mit zufälligen Textanzeigen

Das „Wohin als nächstes?“ Dieser Abschnitt meiner Website enthält in der Fußzeile eine kleine Geschichte, die Besuchern hilft, halbversteckte Seiten zu erkunden und sich auf ein Abenteuer einzulassen (inspiriert von Manuel). Darin erwähne ich meine Lieblingskaffeesorten und verweise auf meine Seite „Kauf mir einen Kaffee“. Wenn Sie diesen Abschnitt aufmerksam verfolgt haben, ist Ihnen vielleicht aufgefallen, dass die Kaffeesorten bei jedem Laden der Seite zufällig ausgewählt werden.

So habe ich das erreicht:

Der HTML

Die Struktur beginnt mit diesem einfachen Snippet:

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)];

Hier ist eine Aufschlüsselung des Skripts:

1. Definieren Sie die Optionen:
   
   Die erste Zeile erstellt eine Liste mit dem Namen „Kaffee“, in der fünf Kaffeesorten aufgeführt sind. Sie können diese Liste individuell anpassen, um Ihre eigenen Favoriten aufzunehmen oder sie sogar durch Teesorten oder andere Getränke zu ersetzen.

2. Suchen Sie den Platzhalter:
   
   Die zweite Zeile verwendet die Funktion document.getElementById(), um das zu finden. Element im HTML durch seine eindeutige ID, random-coffee.

3. Zufällige Auswahl:
   
   Die dritte Zeile wählt mit der Funktion Math.random() eine zufällige Kaffeesorte aus dem Coffees-Array aus und aktualisiert den Textinhalt des Element mit dem ausgewählten Kaffee.

Das ist es!

Diese einfache Einrichtung zeigt bei jedem Laden der Seite dynamisch einen anderen Kaffeenamen an. Es verleiht meiner Website ein wenig Zufälligkeit und Persönlichkeit.

Und wenn Sie mich jetzt entschuldigen, genieße ich jetzt einen warmen und gemütlichen Caffè Latte!

Das obige ist der detaillierte Inhalt vonPersonalisieren Sie Ihre Website mit zufälligen Textanzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!