Alat Otomasi Key Wizard seperti Key Wizard dapat membebaskan tangan kita dan membantu kita menyelesaikan banyak tugas secara otomatis. Dalam banyak skenario, ini dapat sangat meningkatkan produktivitas.
Artikel ini akan mendemonstrasikan: Menggunakan JavaScript untuk mengimplementasikan "tombol wizard" untuk mendemonstrasikan penyelesaian otomatis klik, fokus, input, dan operasi lainnya.
Seperti yang ditunjukkan dalam animasi di atas, operasi berikut secara otomatis dilakukan pada halaman:
1. Klik dua tombol dengan selang waktu satu detik;
2. Atur fokus ke kotak masukan;
3. Masukkan teks ke dalam kotak masukan
; tautan;
prinsiptidak rumit, cukup ambil elemennya dan jalankan klik, fokus, dan acara lainnya.
Ada dua kesulitan:
1. Untuk elemen tanpa ID dan Nama, Anda tidak dapat menggunakan getElementById dan getElementByName. Bagaimana cara menemukannya?
Solusinya adalah: gunakan querySelectorAll untuk mendapatkan semua elemen di halaman, lalu gunakan pencocokan kode sumber untuk menemukan lokasinya secara akurat elemen. Kodenya adalah sebagai berikut:
2. Cara mengatur penundaan: Setelah mengklik suatu lokasi, tunggu beberapa detik sebelum melakukan operasi berikutnya.
Solusinya adalah: gunakan fungsi setTimeOut dan callback. Kodenya adalah sebagai berikut:
. Sesuai dengan prinsip yang telah dijelaskan sebelumnya, siapkan fungsi klik, fokus, dan penugasan, sebagai berikut:
Saat menelepon, masukkan kode sumber, nilai penundaan, dan fungsi panggilan balik.
Yaitu: mengoperasikan elemen kode sumber yang ditentukan, kemudian menunda selama jangka waktu tertentu, dan kemudian menjalankan fungsi panggilan balik.
Bagian kode sumbernya dapat diperoleh di penampil halaman, seperti gambar di bawah ini:
diberikan di sini dan kode lengkap dari contoh di atas diberikan. Simpan sebagai html dan jalankan.
<html>
<tubuh>
<skrip>
document.body.addEventListener("klik", fungsi(e) {
console.log('Klik:',e.target asli);
});
</skrip>
<h1>Wizard tombol versi JS</h1>
<div>
1. Tombol:<br>
<button style="width: 100px; height:100px;" onclick="alert('1 telah diklik');">1</button>
<button style="width: 100px; height:100px;" onclick="alert('2 telah diklik');">2</button>
<br>
<br>
2. Kotak masukan:
<masukan tipe = "teks" nilai = "">
<br>
<br>
3. Tautan: <a href="http://jshaman.com" target="iframe1">jshaman.com</a>
<br>
<nama iframe="iframe1"></iframe>
</div>
<br>
<jam>
<button onclick="fun1();">Mulai eksekusi otomatis</button>
<br>
Lakukan hal berikut secara berurutan:<br>
1. Klik tombol pertama dan kedua; 2. Atur fokus untuk kotak masukan; 3. Tetapkan nilai untuk kotak masukan: abc;
<br>
</tubuh>
<skrip>
//Klik acara//Parameter:
//outer_html: kode sumber elemen yang akan diklik //delay: penundaan //call_back: fungsi panggilan balik fungsi klik(outer_html, penundaan, panggilan_kembali){
//Dapatkan semua elemen halaman var all_elements = document.querySelectorAll('*');
//Melintasi elemen untuk(i=0; i<all_elements.length; i++){
//Cocokkan elemen yang memenuhi ketentuan if(all_elements[i].outerHTML==outer_html){
//Klik semua_elemen[i].klik();
}
}
if(penundaan && panggilan_kembali){
//Jalankan fungsi panggilan balik setTimeout(call_back, delay) setelah berapa milidetik berlalu
}
};
//Atur fokus, yaitu pilih //Parameter:
//outer_html: kode sumber elemen //delay: penundaan //call_back: fungsi panggilan balik fungsi fokus(outer_html, penundaan, panggilan_kembali){
//Dapatkan semua elemen halaman var all_elements = document.querySelectorAll('*');
//Melintasi elemen untuk(i=0; i<all_elements.length; i++){
//Cocokkan elemen yang memenuhi ketentuan if(all_elements[i].outerHTML==outer_html){
//Atur fokus all_elements[i].focus();
}
}
if(penundaan && panggilan_kembali){
//Jalankan fungsi panggilan balik setTimeout(call_back, delay) setelah berapa milidetik berlalu
}
};
//Setel fungsi konten setvalue(outer_html, tipe, nilai, penundaan, call_back){
//Dapatkan semua elemen halaman var all_elements = document.querySelectorAll('*');
//Melintasi elemen untuk(i=0; i<all_elements.length; i++){
//Cocokkan elemen yang memenuhi ketentuan if(all_elements[i].outerHTML==outer_html){
//Klik all_elements[i][type] = nilai;
}
}
if(penundaan && panggilan_kembali){
//Jalankan fungsi panggilan balik setTimeout(call_back, delay) setelah berapa milidetik berlalu
}
};
//Fungsi tombol klik fun1(){
//Kode sumber elemen yang akan diklik var outer_html = `<button style="width: 100px; height:100px;" onclick="alert('1 telah diklik');">1</button>`;
klik(outer_html, 1000, fun2);
}
//Fungsi tombol klik fun2(){
//Kode sumber elemen yang akan diklik var outer_html = `<button style="width: 100px; height:100px;" onclick="alert('2 telah diklik');">2</button>`;
klik(outer_html, 1000, fun3);
}
//Tetapkan fokus dan nilai untuk fungsi input fun3(){
//Kode sumber elemen yang akan diklik var outer_html = `<input type="text" value="">`;
fokus(luar_html);
setvalue(outer_html,"value","abc",1000,call_back_function)
}
//Klik tautan fungsi call_back_function(){
var out_html = `<a href="http://jshaman.com" target="iframe1">jshaman.com</a>`;
klik(keluar_html);
console.log("Klik otomatis selesai")
}
</skrip>
</html> JavaScript dengan dapat dengan mudah memahami logika fungsional dan juga dapat dimodifikasi sesuka hati. Jika Anda ingin meningkatkan keamanan kode, Anda harus melindungi kode Anda dengan enkripsi. Misalnya, Anda dapat menggunakan JShaman, alat enkripsi kebingungan kode JavaScript profesional. Kode JavaScript pada kode sumber lengkap di atas akan menjadi bentuk berikut setelah dienkripsi oleh JShaman, dan penggunaannya tidak akan terpengaruh sama sekali:
Catatan: Sisi kiri adalah kode asli dan sisi kanan adalah kode terenkripsi.
Rekomendasi terkait: [Tutorial Video JavaScript]
Di atas adalah untuk mengajari Anda cara menggunakan JavaScript untuk mengimplementasikan "penyihir tombol"! Untuk lebih jelasnya silahkan perhatikan artikel terkait lainnya di website php Cina!
