Bina widget kaunter anda sendiri menggunakan JavaScript dan HTML

kita juga perlu menambah ID khas untuk setiap medan teks yang kita mahu menjadi kaunter:

<input type="text" size="3" name="passengers_ctr_1_12" value="1">

(atribut nama disimpan dalam kod untuk memastikan keserasian ke belakang.)

Sintaks ID adalah seperti berikut:

(any name)_ctr_(minimum value)_(maximum value) <br>
foo_ctr_0_10 <br>
Allows integer values between 0 and 10 for foo <br>
bar_ctr_-10_10 <br>
Allows integer values between -10 and 10 for bar <br>
baz_ctr_1_999 <br>
Allows integer values between 1 and 999 for baz

Daripada ID, kita boleh menggunakan nama kelas atau atribut yang lebih baik dengan ruang nama yang betul. Walau bagaimanapun, dengan menggunakan ID ini membolehkan kami meniru pengesahan yang sama pada hujung belakang, sebagai contoh, dalam php.

Sesetengah pemaju mungkin mengerutkan dahi pencampuran logik markup dan perniagaan, tetapi ia menyelamatkan kita daripada perlu meniru peraturan dari kod JavaScript dalam skrip belakang belakang.

JavaScript secara automatik:

memeriksa bahawa entri adalah nombor, integer, dan dalam julat yang ditentukan
memeriksa nilai elemen kaunter apabila halaman dimuatkan
cek dan meningkatkan nilai apabila pautan kenaikan diklik
cek dan mengurangkan nilai apabila pautan pengurangan diklik
memeriksa nilai apabila pengguna telah memasukkan teks dan meninggalkan medan

Jika entri sama ada bukan nombor, atau di bawah nilai minimum yang dibenarkan, skrip menetapkan nilai kepada minimum. Sekiranya entri berada di atas maksimum, skrip menetapkannya ke maksimum.

Sesuaikan widget

Counterlink kelas digunakan untuk pautan yang dihasilkan melalui penyelesaian ini. Oleh itu, pautan boleh disesuaikan melalui CSS. Untuk menyesuaikan nama kelas dan teks pautan yang dipaparkan, tetapkan pembolehubah seperti berikut:

var linkclass='counterlink'; <br>
var addtext='+'; <br>
var subtext='-'; <br>
var addbefore=true;

Pembolehubah pembolehubah mentakrifkan lokasi pautan penurunan. Nilai benar menggunakan pautan sebelum medan teks. Nilai palsu mendefinisikannya selepas medan teks, di sebelah pautan yang semakin meningkat.

kelemahan penyelesaian

Ini adalah sejauh HTML, CSS dan JavaScript boleh membawa kita sambil kekal bebas tetikus. Widget kaunter sebenar membolehkan pengguna meningkatkan dan mengurangkan nilai melalui kekunci kursor, dan mempercepatkan kelajuan menatal semakin lama pengguna menyimpan sama ada butang anak panah tertekan.

Mungkin ada penyelesaian yang membolehkan fungsi ini dalam persekitaran penyemak imbas tertentu, tetapi ragu -ragu bahawa ia boleh dibuat untuk bekerja di semua pelayar moden.

Soalan Lazim (Soalan Lazim) Mengenai Widget Kaunter di JavaScript dan HTML

Bagaimana saya boleh membuat widget kaunter menggunakan JavaScript dan HTML? Pertama, anda perlu membuat elemen HTML di mana kaunter akan dipaparkan. Ini boleh menjadi elemen div yang mudah dengan ID yang unik. Seterusnya, anda perlu menulis fungsi JavaScript yang akan meningkatkan nilai kaunter. Fungsi ini boleh dicetuskan oleh pelbagai acara seperti klik butang atau beban halaman. Akhirnya, anda perlu mengemas kini elemen HTML dengan nilai kaunter baru menggunakan harta InnerHTML JavaScript. Mereka boleh digunakan untuk memaparkan bilangan pelawat ke tapak, bilangan item dalam keranjang belanja, undur ke acara khas, atau kemajuan ke arah matlamat penggalangan dana. Mereka juga boleh digunakan dalam permainan atau kuiz untuk menjejaki skor atau masa.

Bolehkah saya menyesuaikan rupa widget kaunter saya? Anda boleh menukar fon, warna, saiz, dan latar belakang kaunter. Anda juga boleh menambah animasi atau peralihan untuk menjadikan kaunter lebih menarik secara visual.

Bagaimana saya boleh menambah widget kaunter ke laman web saya? Elemen HTML harus diletakkan di mana anda mahu kaunter muncul di halaman. Fungsi JavaScript boleh dimasukkan ke dalam tag skrip di bahagian kepala halaman atau dalam fail JavaScript luaran.

Bolehkah saya menggunakan widget kaunter di laman web statik? Oleh kerana kaunter dilaksanakan menggunakan JavaScript, ia boleh berjalan di sisi klien, yang bermaksud ia tidak memerlukan pemprosesan sisi pelayan. Walau bagaimanapun, perlu diingat bahawa nilai kaunter tidak akan berterusan dalam sesi atau pengguna yang berbeza. Ini membolehkan anda menggunakan gaya yang berbeza bergantung pada saiz skrin. Sebagai contoh, anda boleh membuat saiz fon kaunter yang lebih kecil pada skrin yang lebih kecil. Walau bagaimanapun, kaunter ini tidak akan dinamik dan tidak akan dikemas kini dalam masa nyata.

Bagaimana saya boleh menguji widget kaunter saya?

Anda boleh menguji widget kaunter anda dengan menjalankan laman web anda dalam penyemak imbas web. Anda perlu menyemak sama ada kaunter meningkat dengan betul dan jika ia memaparkan dengan betul pada saiz skrin yang berbeza. Anda juga boleh menggunakan alat pemaju untuk debug kod JavaScript anda.

Bolehkah saya menggunakan widget kaunter pra-dibuat? Widget ini dilengkapi dengan gaya dan fungsi mereka sendiri, dan biasanya anda boleh menyesuaikannya agar sesuai dengan keperluan anda. Walau bagaimanapun, perlu diingat bahawa menggunakan widget pra-dibuat mungkin tidak menawarkan fleksibiliti sebanyak yang dibuat sendiri. Anda juga harus menyediakan teks alternatif untuk pembaca skrin.

Atas ialah kandungan terperinci Bina widget kaunter anda sendiri menggunakan JavaScript dan HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!