يمكن لأدوات التشغيل الآلي لـ Key Wizard، مثل Key Wizard، أن تحرر أيدينا وتساعدنا على إكمال العديد من المهام تلقائيًا، وفي العديد من السيناريوهات، يمكنها تحسين الإنتاجية بشكل كبير.
ستوضح هذه المقالة ما يلي: استخدام JavaScript لتنفيذ "معالج الأزرار" لتوضيح الإكمال التلقائي لعمليات النقر والتركيز والإدخال وغيرها من العمليات.
كما هو موضح في الرسم المتحرك أعلاه، يتم تنفيذ العمليات التالية تلقائيًا على الصفحة:
1. انقر فوق زرين يفصل بينهما ثانية واحدة.
2. اضبط التركيز على مربع الإدخال.
3.أدخل
النص في مربع الإدخال؛
الرابط؛
المبدأليس معقدًا، ما عليك سوى الحصول على العنصر وتنفيذ النقر والتركيز والأحداث الأخرى.
هناك صعوبتان:
1. بالنسبة للعناصر التي لا تحتوي على معرف واسم، لا يمكنك استخدام getElementById وgetElementByName. كيفية تحديد موقعهما؟
الحل هو: استخدم querySelectorAll للحصول على جميع العناصر الموجودة في الصفحة، ثم استخدم مطابقة التعليمات البرمجية المصدر لتحديد موقع الملف بدقة عناصر. الرمز هو كما يلي:
2. كيفية ضبط التأخير: بعد النقر فوق الموقع، انتظر بضع ثوانٍ قبل إجراء العملية التالية.
الحل هو: استخدام وظائف setTimeOut ورد الاتصال. الرمز هو كما يلي:
وفقًا للمبادئ الموضحة سابقًا، قم بإعداد وظائف النقر والتركيز والتخصيص، على النحو التالي:
عند الاتصال، قم بتمرير كود المصدر وقيمة التأخير ووظيفة رد الاتصال.
أي: العمل على عناصر الكود المصدري المحدد، ثم تأخيره لفترة زمنية معينة، ثم تنفيذ وظيفة رد الاتصال.
ويمكن الحصول على جزء الكود المصدري في عارض الصفحة، كما هو موضح أدناه:
هنا ويتم توفير الكود الكامل للمثال أعلاه، احفظه بصيغة html وقم بتشغيله.
<أتش تي أم أل>
<الجسم>
<النص البرمجي>
document.body.addEventListener("انقر"، function(e) {
console.log('انقر:',e.originalTarget);
});
</script>
<h1>معالج زر إصدار JS</h1>
<ديف>
1. الزر:<br>
<button style="width: 100px; height:100px;" onclick="alert('1 تم النقر عليه');">1</button>
<button style="width: 100px; height:100px;" onclick="alert('تم النقر على 2');">2</button>
<ر>
<ر>
2. صندوق الإدخال:
<نوع الإدخال = "نص" القيمة = "">
<ر>
<ر>
3. الرابط: <a href="http://jshaman.com" target="iframe1">jshaman.com</a>
<ر>
<iframe name="iframe1"></iframe>
</div>
<ر>
<ساعة>
<button onclick="fun1();">بدء التنفيذ التلقائي</button>
<ر>
قم بما يلي بالترتيب:<br>
1. انقر فوق الزرين الأول والثاني؛ 2. قم بتعيين التركيز لمربع الإدخال؛ 3. قم بتعيين قيمة مربع الإدخال: abc 4. انقر فوق الارتباط؛
<ر>
</الجسم>
<النص البرمجي>
//انقر فوق الحدث//المعلمات:
//outer_html: الكود المصدري للعنصر المراد النقر عليه //التأخير: التأخير //call_back: وظيفة رد الاتصال click(outer_html, Delay, call_back){
// احصل على كافة عناصر الصفحة var all_elements = document.querySelectorAll('*');
// عناصر اجتياز for(i=0; i<all_elements.length; i++){
// تطابق العناصر التي تستوفي الشروط if(all_elements[i].outerHTML==outer_html){
//انقر فوق all_elements[i].click();
}
}
إذا (تأخير && call_back){
// تنفيذ وظيفة رد الاتصال setTimeout(call_back, Delay) بعد مرور عدد المللي ثانية
}
};
// قم بتعيين التركيز، أي حدد // المعلمات:
//outer_html: كود مصدر العنصر //التأخير: تأخير //call_back: وظيفة رد الاتصال التركيز (outer_html, تأخير, call_back){
// احصل على كافة عناصر الصفحة var all_elements = document.querySelectorAll('*');
// عناصر اجتياز for(i=0; i<all_elements.length; i++){
// تطابق العناصر التي تستوفي الشروط if(all_elements[i].outerHTML==outer_html){
//ضبط التركيز all_elements[i].focus();
}
}
إذا (تأخير && call_back){
// تنفيذ وظيفة رد الاتصال setTimeout(call_back, Delay) بعد مرور عدد المللي ثانية
}
};
// تعيين وظيفة المحتوى setvalue(outer_html, type, value, Delay, call_back){
// احصل على كافة عناصر الصفحة var all_elements = document.querySelectorAll('*');
// عناصر اجتياز for(i=0; i<all_elements.length; i++){
// تطابق العناصر التي تستوفي الشروط if(all_elements[i].outerHTML==outer_html){
//انقر فوق all_elements[i][type] = value;
}
}
إذا (تأخير && call_back){
// تنفيذ وظيفة رد الاتصال setTimeout(call_back, Delay) بعد مرور عدد المللي ثانية
}
};
// انقر على وظيفة الزر fun1(){
// الكود المصدري للعنصر المراد النقر عليه var External_html = `<button style="width: 100px; height:100px;" onclick="alert('تم النقر على 1');">1</button>`;
انقر (outer_html، 1000، fun2)؛
}
// انقر فوق الزر وظيفة fun2(){
// الكود المصدري للعنصر المراد النقر عليه var External_html = `<button style="width: 100px; height:100px;" onclick="alert('تم النقر على 2');">2</button>`;
انقر (outer_html، 1000، fun3)؛
}
// تعيين التركيز والقيمة لوظيفة الإدخال fun3(){
// الكود المصدري للعنصر المراد النقر عليه var External_html = `<input type="text" value="">`;
التركيز(outer_html);
setvalue(outer_html،"value"، "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("اكتمل النقر التلقائي")
}
</script>
</html> يمكن أن تفهم المنطق الوظيفي بسهولة ويمكن أيضًا تعديلها حسب الرغبة. إذا كنت ترغب في تحسين أمان التعليمات البرمجية، فيجب عليك حماية التعليمات البرمجية الخاصة بك بالتشفير. على سبيل المثال، يمكنك استخدام JShaman، وهي أداة تشفير احترافية لتشفير رموز JavaScript. سيصبح كود JavaScript في الكود المصدري الكامل أعلاه بالشكل التالي بعد تشفيره بواسطة JShaman، ولن يتأثر استخدامه بأي شكل من الأشكال:
ملاحظة: الجانب الأيسر هو الرمز الأصلي والجانب الأيمن هو الرمز المشفر.
التوصيات ذات الصلة: [برنامج تعليمي لفيديو JavaScript]
ما سبق هو تعليمك كيفية استخدام JavaScript لتنفيذ "معالج الأزرار"! لمزيد من التفاصيل، يرجى الانتباه إلى المقالات الأخرى ذات الصلة على موقع php الصيني!
