ランダムなテキスト表示でウェブサイトをパーソナライズする

「次はどこへ?」私のウェブサイトのセクションには、訪問者が半隠れのページを探索して冒険に出かけるのに役立つ小さなストーリーがフッターに含まれています (マヌエルからインスピレーションを得た)。その中で、私はコーヒーを買ってくださいの私のページに接続して、私の好きな種類のコーヒーについて言及しています。このセクションに細心の注意を払った方は、ページが読み込まれるたびにコーヒーの種類がランダムに選択されることに気づいたかもしれません。

私がそれを達成した方法は次のとおりです:

HTML

構造は次の単純なスニペットで始まります:

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. オプションを定義します:
   
   最初の行は、5 種類のコーヒーをリストする、coffees というリストを作成します。このリストをカスタマイズして、自分のお気に入りを含めたり、お茶や他の飲み物の種類に置き換えることもできます。

2. プレースホルダーを見つけます:
   
   2 行目では、関数 document.getElementById() を使用して HTML 内の要素を一意の ID、random-coffee.

で検索します。

3. 選択をランダム化します:
   
   3 行目は、関数 Math.random() を使用してコーヒー配列からランダムなコーヒーの種類を選択し、 のテキスト内容を更新します。選択したコーヒーの要素。

それでおしまい！

この簡単な設定では、ページが読み込まれるたびに異なるコーヒー名が動的に表示されます。私のサイトに少しのランダムさと個性を加えます。

それでは、失礼いたしますが、暖かくて居心地の良いカフェラテを楽しみに行きます!

以上がランダムなテキスト表示でウェブサイトをパーソナライズするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。