Penjelasan terperinci tentang cara melaksanakan pemalam mesin taip di hujung hadapan

Artikel ini membawakan anda pengetahuan yang berkaitan tentang bahagian hadapan terutamanya tentang cara bahagian hadapan melaksanakan pemalam mesin taip. Saya harap ia akan menjadi berguna untuk anda.

Kata Pengantar

Halaman hadapan melaksanakan kesan mesin taip Kaedah yang terdapat di Internet dengan mengubah suai nod dom tidak boleh digunakan sebagai terminal silang isu silang-terminal, penyelesaian keserasian telah dibuat : Gunakan fungsi panggil balik untuk memanggil panggilan balik setiap kali menaip berubah dan membuang rentetan yang dikemas kini, membolehkan pengguna mengendalikan pemaparan berikutnya dengan cara ini, ia boleh merentas platform dan boleh digunakan secara normal pada semua terminal.

Mesin taip paling ringkas

const dom = document.querySelector('.content')
const data = '最简单的打字效果代码'.split('')
let index = 0
function writing(index) {
    if (index <p>Mesin taip yang paling mudah hanya menambah teks melalui pemasa Melalui contoh ini kita boleh mendapatkan idea pelaksanaan tertentu Sudah tentu, beberapa fungsi atau isu prestasi masih perlu dioptimumkan secara berterusan, tetapi kita boleh menggunakan ini sebagai berdasarkan asas untuk mereka bentuk. pemalam. </p><h2 data-id="heading-3">1. Tambah animasi pemadaman ke belakang </h2><p>Jadi kami menambah keadaan menaip semasa </p><p>Apabila keadaan "menaip", ia bermakna menaip ke hadapan, sebaliknya Untuk memadam ke belakang , </p><p> kemudian proses logik bahagian pemadaman Logik bahagian ini adalah sama seperti menambah ke hadapan, dan kita juga perlu menukar status kepada "menaip" selepas memadam aksara terakhir 🎜>2. Kelajuan menambah dan memadam ke belakang boleh dikawal</p><h2 data-id="heading-4">Kemudian anda juga boleh menyesuaikan kelajuan menambah ke hadapan atau memadam ke belakang, yang boleh dinilai oleh status semasa</h2><p>3 teks input boleh menjadi rentetan tunggal atau tatasusunan rentetan </p><h2 data-id="heading-5"> dan menyokong hantaran dalam tatasusunan rentetan bukannya rentetan tunggal, kerana keperluan sebenar mungkin berbilang rentetan Teruskan berputar antara </h2><p> Pertama sekali , tiada apa yang boleh dikatakan tentang logik satu aksara Jika ia adalah tatasusunan rentetan, anda perlu menambah indeks untuk menentukan rentetan yang telah dicapai oleh mesin taip semasa </p><p> Lulus changeTextIndex Fungsi ini boleh berterusan kemas kini rentetan semasa untuk mencapai kesan gelung tatasusunan rentetan</p><p>4 Hidupkan kelewatan</p><h2 data-id="heading-6">Tambah kelewatan antara permulaan dan penghujung rentetan</h2> <p> Digunakan untuk. mengawal masa menunggu selepas setiap menaip </p><p>5 Berhenti menaip </p><h2 data-id="heading-7"> Apabila mesin taip berjalan terlalu lama, memandangkan lapisan bawah dilaksanakan melalui pemasa, maka Ia mesti dimatikan apabila tidak masuk. gunakan untuk mengelakkan pembaziran prestasi Sebagai contoh, jika mesin taip digunakan pada halaman utama, tetapi mesin taip tidak lagi diperlukan apabila memasuki halaman lain, maka ia perlu dihentikan. </h2><p>Ikat fungsi pada contoh untuk menghentikan mesin taip semasa Apabila dipanggil, pemasa seterusnya akan ditetapkan batal, dengan itu menghentikan mesin taip. </p><p>6. Gunakan panggilan balik untuk menyelesaikan masalah program mini </p><h2 data-id="heading-8">Dalam kod di atas, kami telah mengubah suai nod dom untuk menukar aksara mesin taip, jadi dalam program mini atau program lain yang tidak mempunyai dom Atau apabila api diubah suai oleh dom tidak lagi innerhtml, pemalam tidak boleh menyokongnya, jadi ia serasi dengannya dan memaparkan rentetan semasa melalui callBackText, dan kemudian menggunakan fungsi untuk menentukan cara menggunakan rentetan ini </h2> <p>Apabila terdapat panggilan balik, keutamaan diberikan untuk memanggil balik rentetan melalui panggilan balik, membolehkan perniagaan mendapatkan rentetan dan memproses logik yang diubah dengan sendirinya, supaya kesan menaip boleh dicapai di mana-mana tanpa bergantung pada persekitaran . </p><p>Berikut ialah contoh projek uniapp saya sendiri</p><p></p><p><img src="https://img.php.cn/upload/article/000/000/020/a4e713f7104ede389fda47b0c65e7107-1.png" alt="Penjelasan terperinci tentang cara melaksanakan pemalam mesin taip di hujung hadapan" loading="lazy"></p><p><img src="https://img.php.cn/upload/article/000/000/020/924bcf309a473f761e178442d2a375be-2.png" alt="Penjelasan terperinci tentang cara melaksanakan pemalam mesin taip di hujung hadapan" loading="lazy">Kesan: </p><p></p> <p><img src="https://img.php.cn/upload/article/000/000/020/924bcf309a473f761e178442d2a375be-3.gif" alt="Penjelasan terperinci tentang cara melaksanakan pemalam mesin taip di hujung hadapan" loading="lazy">Perpustakaan typed.js pihak ketiga</p><h2 data-id="heading-9">Kebanyakan logik secara khusus merujuk kepada </h2>[typed.js]-Pustaka animasi menaip JavaScript<p><a href="https://www.php.cn/link/128250b0e8e7e1ea6558acef9834081a" target="_blank" title="https://mattboldt.github.io/typed.js/docs/" ref="nofollow noopener noreferrer"><p>Ini ialah pemalam tersuai Fungsi yang disokongnya tidak sebaik typed.js, tetapi ia lebih ringan dan boleh menentukan lebih banyak fungsi yang anda perlukan. </p>
<h2 data-id="heading-10">Ringkasan</h2>
<p> Tanpa mengambil kira persekitaran, kesan mesin taip yang paling mudah adalah dengan terus menggunakan pemasa untuk mengemas kini teks kandungan nod selepas tempoh masa, anda juga boleh membuat Kembangkan dan kemas kini pemalam mesin taip yang agak lengkap.</p>
<p>Pembelajaran yang disyorkan: "<a href="https://www.php.cn/course/list/1.html" target="_blank">pembangunan bahagian hadapan web</a>"</p></a></p>

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara melaksanakan pemalam mesin taip di hujung hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!