Memperibadikan Laman Web Anda dengan Paparan Teks Rawak

"Ke mana seterusnya?" bahagian tapak web saya termasuk cerita kecil dalam pengaki yang membantu pelawat meneroka halaman separa tersembunyi dan meneruskan pengembaraan (diilhamkan oleh Manuel). Di dalamnya, saya menyebut jenis kopi kegemaran saya, menyambung ke halaman saya di Beli saya kopi. Jika anda telah memberi perhatian kepada bahagian ini, anda mungkin perasan bahawa jenis kopi dipilih secara rawak setiap kali halaman dimuatkan.

Begini cara saya mencapainya:

HTML

Struktur bermula dengan coretan ringkas ini:

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

Berikut ialah pecahan skrip:

1. Tentukan pilihan:
   
   Baris pertama mencipta senarai yang dipanggil kopi, menyenaraikan lima jenis kopi. Anda boleh menyesuaikan senarai ini untuk memasukkan kegemaran anda sendiri atau menggantikannya dengan jenis teh atau minuman lain.

2. Cari pemegang tempat:
   
   Baris kedua menggunakan fungsi document.getElementById() untuk mencari elemen dalam HTML dengan id uniknya, rawak-kopi.

3. Rawakkan pilihan:
   
   Baris ketiga memilih jenis kopi rawak daripada tatasusunan kopi menggunakan fungsi Math.random() dan mengemas kini kandungan teks elemen dengan kopi yang dipilih.

Itu sahaja!

Persediaan ringkas ini memaparkan nama kopi yang berbeza secara dinamik setiap kali halaman dimuatkan. Ia menambah sedikit rawak dan keperibadian pada tapak saya.

Dan sekarang, jika anda boleh maafkan saya, saya akan pergi untuk menikmati caffè latte yang hangat dan selesa!

Atas ialah kandungan terperinci Memperibadikan Laman Web Anda dengan Paparan Teks Rawak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!