Memahami Fungsi Ticker dalam JavaScript: Cara Ia Berfungsi dan Penjelasan Terperinci

Memahami Fungsi Ticker dalam JavaScript

Ticker sedang menjalankan teks yang sering digunakan dalam aplikasi papan tanda digital atau sebagai media promosi. Teks ini boleh memaparkan maklumat seperti berita, iklan atau pengumuman dengan cara yang menarik perhatian. Teks berjalan biasanya dilaksanakan dengan HTML dan CSS, dan boleh dikendalikan tanpa JavaScript, walaupun banyak perisian turut menyediakan ciri ini untuk penjadualan dan kawalan yang lebih baik.

Artikel ini membincangkan cara fungsi ticker berfungsi dalam JavaScript, yang saya temui dalam cabaran pada Codewars. Fungsi ini membolehkan kami mencipta kesan teks menatal menggunakan JavaScript.

Apakah Tickers?

Ticker ialah teks yang bergerak secara mendatar, yang sering digunakan dalam pelbagai aplikasi untuk memaparkan maklumat yang dikemas kini secara berterusan, seperti berita terkini, pengumuman atau iklan. Kesan ini boleh ditemui pada skrin digital atau papan kenyataan elektronik dan secara amnya boleh dilaksanakan menggunakan HTML, CSS dan JavaScript.

Fungsi ticker dalam JavaScript yang akan kita bincangkan di bawah, menyediakan penyelesaian untuk mencipta kesan teks berjalan dinamik dalam aplikasi web anda.

Berikut ialah kod fungsi ticker yang akan kita bincangkan:

const ticker = (text, width, tick) => {
  const display = ' '.repeat(width);  // 1
  text = display + text + display;    // 2
  tick = tick % (text.length - width); // 3
  return text.slice(tick, tick + width); // 4
}

Penjelasan fungsi ticker

Fungsi ini mempunyai tiga parameter:

• teks: Teks yang anda mahu paparkan.
• lebar: Lebar paparan yang diingini, iaitu berapa banyak aksara akan dipaparkan pada satu masa.
• tandakan: Kedudukan anjakan teks, yang menentukan teks yang akan dipaparkan apabila fungsi dipanggil.

Berikut ialah penjelasan teknikal bagi setiap langkah dalam fungsi ini:

---

1. Mencipta Ruang untuk Membungkus Teks

const display = ' '.repeat(width);

Dalam langkah pertama, kami mencipta rentetan kosong yang mengandungi ruang sebesar lebar menggunakan kaedah repeat(). Fungsi repeat() akan mengulangi aksara yang ditentukan (dalam kes ini ruang) bilangan kali yang ditentukan oleh lebar.

Contoh:
Jika lebar ialah 5, maka pembolehubah paparan akan mengandungi rentetan ' ' yang terdiri daripada 5 ruang.

2. Menambah Ruang Sekitar Teks

text = display + text + display;

Dalam langkah kedua, kami menambah rentetan paparan (ruang) di hadapan dan belakang teks (teks). Ini memastikan teks mempunyai ruang kosong di kedua-dua belah pihak, menyediakan tempat untuk teks bergerak (tatal) tanpa terputus.

Contoh:
Katakan teks yang diberikan ialah 'Hello' dan lebarnya ialah 5. Kemudian selepas baris ini, teksnya ialah:

const ticker = (text, width, tick) => {
  const display = ' '.repeat(width);  // 1
  text = display + text + display;    // 2
  tick = tick % (text.length - width); // 3
  return text.slice(tick, tick + width); // 4
}

Dengan ini, terdapat ruang kosong yang cukup di kiri dan kanan teks untuk pergerakan yang lebih lancar.

3. Mengira Kedudukan Pergerakan Teks

const display = ' '.repeat(width);

Dalam langkah ketiga, kami menggunakan operator modulus (%) untuk memastikan nilai tanda berada dalam julat yang sah dan tidak melebihi panjang teks yang telah dibalut dalam ruang.

Teks.panjang - nilai lebar memberikan jumlah panjang teks yang dibalut (termasuk ruang) tolak lebar paparan yang ingin kami paparkan (lebar). Ini memastikan anjakan teks yang ditentukan oleh tanda tidak melebihi panjang teks yang boleh dipaparkan.

Contoh:
Jika panjang teks selepas menambah ruang ialah 15 (contohnya, ' Hello '), dan lebarnya ialah 5, maka teks.panjang - lebar menjadi 10. Iaitu, kita hanya perlu memastikan bahawa kutu berada dalam julat 0 hingga 9. Ini memastikan pergerakan teks tetap sah tanpa sebarang bahagian yang hilang.

4. Mendapatkan Subrentetan untuk Dipaparkan

text = display + text + display;

Dalam langkah terakhir, kami menggunakan kaedah slice() untuk mengambil sebahagian daripada rentetan teks, bermula dari kedudukan tanda ke kedudukan lebar tanda. Fungsi slice() mengembalikan bahagian rentetan yang sepadan dengan kedudukan itu.

Contoh:
Contohnya, jika tandakan = 3 dan lebar = 5, maka kepingan kod(3, 8) akan menghasilkan subrentetan 'Hello' daripada rentetan ' Hello '.

Dengan cara ini, kami memaparkan bahagian teks dengan panjang yang sepadan dengan lebar. Setiap kali fungsi ini dipanggil dengan nilai tanda yang berbeza, teks yang dipaparkan akan beralih, mencipta pergerakan atau kesan menatal.

---

Contoh Penggunaan Fungsi Ticker

Mari kita lihat contoh penggunaan fungsi ini dalam kod:

'     Hello     '

Proses yang berlaku ialah:

1. paparan = ' ' (5 ruang).
2. Teks diubah suai: ' Hello World '.
3. Nilai tanda = 3, dan panjang teks selepas pembalut ialah 18. Dengan lebar = 5, kita tahu bahawa tanda semak boleh berjulat dari 0 hingga 13.
4. Fungsi slice(3, 8) akan mengembalikan subrentetan 'Hello'.

Jika kita meningkatkan nilai tanda pada panggilan seterusnya, teks akan bergerak lebih jauh dan bahagian teks yang muncul akan berubah.

Bagaimana Teks Boleh Bergerak?

Kesan pergerakan tercipta kerana setiap kali kita memanggil fungsi ticker, nilai tick akan berubah. Apabila nilai semak meningkat, bahagian teks yang dipaparkan juga berubah. Ini memberikan kesan pergerakan kerana tanda semak menatal teks secara dinamik.

Untuk menguji kesan ini dengan lebih lanjut, kita boleh memanggil fungsi ticker dalam gelung dengan meningkatkan nilai tanda secara berkala, contohnya menggunakan setInterval() untuk mengemas kini paparan setiap beberapa saat.

---

Jika anda berminat untuk mencuba cabaran yang serupa, saya menemui fungsi ini melalui Codewars, dan ia merupakan latihan yang menyeronokkan untuk meningkatkan kemahiran pengaturcaraan JavaScript anda.

Semoga berjaya, dan saya harap artikel ini berguna dalam memahami cara kesan ticker berfungsi dalam JavaScript!

Atas ialah kandungan terperinci Memahami Fungsi Ticker dalam JavaScript: Cara Ia Berfungsi dan Penjelasan Terperinci. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!