Rumah > Artikel > hujung hadapan web > Cara Membuat Telefon Bergetar Menggunakan JavaScript
Dalam tutorial ini, kami akan meneroka cara mencetuskan fungsi getaran pada telefon pintar menggunakan JavaScript. Ciri ini boleh berguna untuk mencipta aplikasi web yang lebih interaktif dan responsif, terutamanya apabila menyasarkan pengguna mudah alih. Mari kita mendalami butiran tentang cara ini boleh dilaksanakan dengan berkesan.
API Getaran ialah ciri ringkas tetapi berkuasa yang tersedia dalam penyemak imbas web moden yang membolehkan anda mengawal kefungsian getaran peranti. API ini digunakan terutamanya pada peranti mudah alih, kerana kebanyakan desktop tidak mempunyai ciri getaran.
API adalah mudah dan terdiri daripada satu kaedah: navigator.vibrate(). Apabila kaedah ini dipanggil, ia mencetuskan getaran peranti untuk tempoh tertentu.
Sintaks kaedah vibrate() adalah seperti berikut:
navigator.vibrate(pattern);
Di sini, corak boleh:
Contohnya:
// Vibrate for 500 milliseconds navigator.vibrate(500); // Vibrate for 200ms, pause for 100ms, then vibrate for 200ms again navigator.vibrate([200, 100, 200]);
Mari kita mulakan dengan contoh asas di mana kita mencetuskan getaran apabila pengguna mengklik butang.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vibration API Example</title> </head> <body> <button onclick="navigator.vibrate(300)">Vibrate</button> </body> </html>
Dalam contoh ini, mengklik butang akan menyebabkan peranti bergetar selama 300 milisaat.
Anda boleh mencipta corak getaran yang lebih kompleks dengan menggunakan tatasusunan nombor. Setiap indeks ganjil dalam tatasusunan mentakrifkan tempoh getaran dan setiap indeks genap mentakrifkan jeda.
<button onclick="navigator.vibrate([100, 50, 100, 50, 300])">Vibrate Pattern</button>
Dalam contoh ini, telefon akan bergetar dalam corak berikut: getaran 100ms, jeda 50ms, getaran 100ms, jeda 50ms, getaran 300ms.
Untuk menghentikan getaran yang sedang berjalan, anda boleh memanggil kaedah vibrate() dengan nilai 0 atau tatasusunan kosong:
navigator.vibrate(0); // Or navigator.vibrate([]);
Bukan semua penyemak imbas atau peranti menyokong API Getaran. Sebelum menggunakan ciri getaran, adalah amalan yang baik untuk menyemak sama ada API disokong:
if ("vibrate" in navigator) { console.log("Vibration API is supported"); } else { console.log("Vibration API is not supported"); }
API Getaran dalam JavaScript ialah cara yang mudah tetapi berkesan untuk meningkatkan interaktiviti aplikasi web anda, terutamanya untuk pengguna mudah alih. Sama ada anda mencipta permainan, membina pemberitahuan atau hanya menambah sedikit bakat pada UI anda, keupayaan untuk mencetuskan getaran boleh meningkatkan penglibatan pengguna dengan ketara. Ingat untuk menggunakan ciri ini dengan bijak untuk memastikan pengalaman pengguna yang positif.
Saluran Telegram:
https://t.me/Free_Programmers
Atas ialah kandungan terperinci Cara Membuat Telefon Bergetar Menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!