เครื่องมือการทำงานอัตโนมัติของตัวช่วยสร้างคีย์ เช่น ตัวช่วยสร้างคีย์สามารถปลดปล่อยมือของเราและช่วยให้เราทำงานหลายอย่างได้โดยอัตโนมัติ ในหลาย ๆ สถานการณ์ สามารถปรับปรุงประสิทธิภาพการทำงานได้อย่างมาก
บทความนี้จะสาธิต: การใช้ JavaScript เพื่อใช้ "ตัวช่วยสร้างปุ่ม" เพื่อสาธิตการคลิก โฟกัส การป้อนข้อมูล และการดำเนินการอื่นๆ โดยอัตโนมัติ
ดังที่แสดงในภาพเคลื่อนไหวด้านบน การดำเนินการต่อไปนี้จะดำเนินการโดยอัตโนมัติบนหน้า:
1. คลิกปุ่มสองปุ่มแยกกัน 1 วินาที
2. ตั้งโฟกัสไปที่ช่องป้อนข้อมูล
3. ป้อนข้อความในช่องป้อนข้อมูล
4. คลิกเพื่อเปิด ลิงค์
หลักการมันไม่ซับซ้อน เพียงแค่รับองค์ประกอบและดำเนินการคลิก โฟกัส และเหตุการณ์อื่น ๆ
มีสองปัญหา:
1. สำหรับองค์ประกอบที่ไม่มี ID และชื่อ คุณไม่สามารถใช้ getElementById และ getElementByName ได้
วิธีแก้ไขคือ: ใช้ querySelectorAll เพื่อรับองค์ประกอบทั้งหมดบนเพจ จากนั้นใช้ซอร์สโค้ดที่ตรงกันเพื่อค้นหาตำแหน่งอย่างถูกต้อง องค์ประกอบ รหัสมีดังนี้:
2. วิธีการตั้งค่าการหน่วงเวลา: หลังจากคลิกสถานที่แล้ว ให้รอสักครู่ก่อนดำเนินการครั้งถัดไป
วิธีแก้ไขคือ: ใช้ setTimeOut และฟังก์ชันการโทรกลับ รหัสมีดังนี้:
ตามหลักการที่อธิบายไว้ข้างต้น เตรียมฟังก์ชันการคลิก โฟกัส และมอบหมายงาน ดังนี้
เมื่อโทร ให้ส่งซอร์สโค้ด ค่าดีเลย์ และฟังก์ชันโทรกลับ
นั่นคือ: ดำเนินการกับองค์ประกอบของซอร์สโค้ดที่ระบุ จากนั้นหน่วงเวลาเป็นระยะเวลาหนึ่ง จากนั้นจึงดำเนินการฟังก์ชันเรียกกลับ
สามารถรับส่วนของซอร์สโค้ดได้ในโปรแกรมดูเพจ ดังที่แสดงด้านล่าง:
ไว้ที่นี่ และให้โค้ดทั้งหมดของตัวอย่างข้างต้น บันทึกเป็น html และเรียกใช้
<html>
<ร่างกาย>
<สคริปต์>
document.body.addEventListener ("คลิก" ฟังก์ชั่น (e) {
console.log('คลิก:',e.OriginalTarget);
-
</สคริปต์>
<h1>ตัวช่วยสร้างปุ่มเวอร์ชัน JS</h1>
<div>
1. ปุ่ม:<br>
<button style="width: 100px; height:100px;" onclick="alert('1 was clicked');">1</button>
<button style="width: 100px; height:100px;" onclick="alert('2 was clicked');">2</button>
<br>
<br>
2. กล่องป้อนข้อมูล:
<ประเภทอินพุต = "ข้อความ" ค่า = "">
<br>
<br>
3. ลิงก์: <a href="http://jshaman.com" target="iframe1">jshaman.com</a>
<br>
<iframe name="iframe1"></iframe>
</div>
<br>
<ชม.>
<button onclick="fun1();">เริ่มดำเนินการอัตโนมัติ</button>
<br>
ทำดังต่อไปนี้ตามลำดับ:<br>
1. คลิกปุ่มแรกและปุ่มที่สอง 2. ตั้งค่าโฟกัสสำหรับช่องป้อนข้อมูล 3. ตั้งค่าสำหรับช่องป้อนข้อมูล: abc;
<br>
</ร่างกาย>
<สคริปต์>
//คลิกเหตุการณ์//พารามิเตอร์:
//outer_html: ซอร์สโค้ดขององค์ประกอบที่จะคลิก //delay: ความล่าช้า //call_back: ฟังก์ชั่นการโทรกลับ คลิกฟังก์ชัน (outer_html, ความล่าช้า, call_back){
//รับองค์ประกอบทั้งหมดของหน้า var all_elements = document.querySelectorAll('*');
//องค์ประกอบการเคลื่อนที่สำหรับ(i=0; i<all_elements.length; i++){
//จับคู่องค์ประกอบที่ตรงตามเงื่อนไข if(all_elements[i].outerHTML==outer_html){
//คลิก all_elements[i].คลิก();
-
-
ถ้า (ล่าช้า && โทรกลับ){
// ดำเนินการฟังก์ชันโทรกลับ setTimeout (call_back, ล่าช้า) หลังจากผ่านไปกี่มิลลิวินาที
-
-
//ตั้งค่าโฟกัส นั่นคือ เลือก //พารามิเตอร์:
//outer_html: ซอร์สโค้ดองค์ประกอบ //delay: ล่าช้า //call_back: ฟังก์ชั่นการโทรกลับ ฟังก์ชั่นโฟกัส (outer_html, ดีเลย์, call_back){
//รับองค์ประกอบทั้งหมดของหน้า var all_elements = document.querySelectorAll('*');
//องค์ประกอบการเคลื่อนที่สำหรับ(i=0; i<all_elements.length; i++){
//จับคู่องค์ประกอบที่ตรงตามเงื่อนไข if(all_elements[i].outerHTML==outer_html){
//ตั้งค่าโฟกัส all_elements[i].focus();
-
-
ถ้า (ล่าช้า && โทรกลับ){
// ดำเนินการฟังก์ชันโทรกลับ setTimeout (call_back, ล่าช้า) หลังจากผ่านไปกี่มิลลิวินาที
-
-
//ตั้งค่าฟังก์ชันเนื้อหา setvalue(outer_html, ประเภท, ค่า, ความล่าช้า, call_back){
//รับองค์ประกอบทั้งหมดของหน้า var all_elements = document.querySelectorAll('*');
//องค์ประกอบการเคลื่อนที่สำหรับ(i=0; i<all_elements.length; i++){
//จับคู่องค์ประกอบที่ตรงตามเงื่อนไข if(all_elements[i].outerHTML==outer_html){
//คลิก all_elements[i][type] = ค่า;
-
-
ถ้า (ล่าช้า && โทรกลับ){
// ดำเนินการฟังก์ชันโทรกลับ setTimeout (call_back, ล่าช้า) หลังจากผ่านไปกี่มิลลิวินาที
-
-
//คลิกปุ่มฟังก์ชั่น fun1(){
//ซอร์สโค้ดขององค์ประกอบที่จะคลิก var ภายนอก_html = `<button style="width: 100px; height:100px;" onclick="alert('1 was clicked');">1</button>`;
คลิก(outer_html, 1,000, fun2);
-
//คลิกปุ่มฟังก์ชั่น fun2(){
//ซอร์สโค้ดขององค์ประกอบที่จะคลิก var ภายนอก_html = `<button style="width: 100px; height:100px;" onclick="alert('2 was clicked');">2</button>`;
คลิก(outer_html, 1,000, fun3);
-
//ตั้งค่าโฟกัสและค่าสำหรับฟังก์ชันอินพุต fun3(){
//ซอร์สโค้ดขององค์ประกอบที่จะคลิก var ภายนอก_html = `<input type="text" value="">`;
โฟกัส(outer_html);
ตั้งค่า (outer_html, "ค่า", "abc", 1000, call_back_function)
-
//คลิกที่ลิงค์ฟังก์ชัน call_back_function(){
var out_html = `<a href="http://jshaman.com" target="iframe1">jshaman.com</a>`;
คลิก(out_html);
console.log("การคลิกอัตโนมัติเสร็จสิ้น")
-
</สคริปต์>
</html> JavaScript ที่มี สามารถเข้าใจตรรกะการทำงานได้อย่างง่ายดายและยังสามารถแก้ไขได้ตามต้องการ หากคุณต้องการปรับปรุงความปลอดภัยของโค้ด คุณควรปกป้องโค้ดของคุณด้วยการเข้ารหัส ตัวอย่างเช่น คุณสามารถใช้ JShaman ซึ่งเป็นเครื่องมือเข้ารหัสที่ทำให้สับสนโค้ด JavaScript ระดับมืออาชีพ โค้ด JavaScript ในซอร์สโค้ดที่สมบูรณ์ด้านบนจะกลายเป็นรูปแบบต่อไปนี้หลังจากถูกเข้ารหัสโดย JShaman และการใช้งานจะไม่ได้รับผลกระทบใดๆ ทั้งสิ้น:
หมายเหตุ: ด้านซ้ายคือรหัสต้นฉบับ และด้านขวาคือรหัสที่เข้ารหัส
คำแนะนำที่เกี่ยวข้อง: [วิดีโอสอน JavaScript]
ข้างต้นคือการสอนวิธีใช้ JavaScript เพื่อใช้งาน "ตัวช่วยสร้างปุ่ม"! สำหรับรายละเอียดเพิ่มเติม โปรดอ่านบทความอื่นๆ ที่เกี่ยวข้องบนเว็บไซต์ php Chinese!
