透過隨機文字顯示個人化您的網站

「下一步要去哪裡？」我網站的部分在頁腳中包含一個小故事，可以幫助訪客探索半隱藏的頁面並繼續冒險（受到曼努埃爾的啟發）。在其中，我提到了我最喜歡的咖啡類型，並連接到我的「為我買杯咖啡」頁面。如果您密切關注本節，您可能會注意到每次頁面加載時都會隨機選擇咖啡類型。

以下是我實現這一目標的方法：

超文本標記語言

結構以這個簡單的片段開始：

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.</span></p>

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

以下是腳本的詳細說明：

1. 定義選項：
   
   第一行建立一個名為「咖啡」的列表，列出五種類型的咖啡。您可以自訂此列表以包含您自己的最愛，甚至可以將其替換為茶或其他飲料類型。

2. 找出佔位符：
   
   第二行使用函數 document.getElementById() 來定位 。 HTML 中的元素通過其唯一 id random-coffee。

3. 隨機選擇：
   
   第三行使用函數 Math.random() 從 Coffees 陣列中選擇隨機咖啡類型，並更新 的文字內容。帶有所選咖啡的元素。

就是這樣！

這個簡單的設定在每次載入頁面時動態顯示不同的咖啡名稱。它為我的網站增添了一點隨機性和個性。

現在，請原諒，我要去享受一杯溫暖舒適的拿鐵咖啡了！

以上是透過隨機文字顯示個人化您的網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！