通过随机文本显示个性化您的网站

“下一步去哪里？”我网站的部分在页脚中包含一个小故事，可以帮助访问者探索半隐藏的页面并继续冒险（受到曼努埃尔的启发）。在其中，我提到了我最喜欢的咖啡类型，并连接到我的“给我买杯咖啡”页面。如果您密切关注本节，您可能会注意到每次页面加载时都会随机选择咖啡类型。

以下是我实现这一目标的方法：

超文本标记语言

结构以这个简单的片段开始：

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中文网其他相关文章！