Automatisierungstools wie Key Wizard können uns die Hände frei machen und uns dabei helfen, viele Aufgaben automatisch zu erledigen. In vielen Szenarien kann dies die Produktivität erheblich verbessern.
In diesem Artikel wird Folgendes demonstriert: Verwenden von JavaScript zum Implementieren eines „Schaltflächenassistenten“, um den automatischen Abschluss von Klick-, Fokus-, Eingabe- und anderen Vorgängen zu demonstrieren.
Wie in der Animation oben gezeigt, werden die folgenden Vorgänge automatisch auf der Seite ausgeführt:
1. Klicken Sie auf zwei Schaltflächen im Abstand von einer Sekunde.
2. Setzen Sie den Fokus auf dasEingabefeld
.
4. Klicken Sie, um das zu öffnen Link;
Es ist nicht kompliziert, holen Sie sich einfach das Element und führen Sie Klick-, Fokus- und andere Ereignisse aus.
Es gibt zwei Schwierigkeiten:
1. Für Elemente ohne ID und Namen können Sie getElementById und getElementByName nicht verwenden.
Die Lösung lautet: Verwenden Sie querySelectorAll, um alle Elemente auf der Seite abzurufen, und verwenden Sie dann den Quellcode-Abgleich, um sie genau zu lokalisieren Elemente. Der Code lautet wie folgt:
2. So stellen Sie die Verzögerung ein: Nachdem Sie auf einen Ort geklickt haben, warten Sie einige Sekunden, bevor Sie den nächsten Vorgang ausführen.
Die Lösung ist: SetTimeOut- und Callback-Funktionen verwenden. Der Code lautet wie folgt:
. Bereiten Sie die Klick-, Fokus- und Zuweisungsfunktionen wie folgt vor:
Übergeben Sie beim Aufruf den Quellcode, den Verzögerungswert und die Rückruffunktion.
Das heißt: Bearbeiten Sie die Elemente des angegebenen Quellcodes, verzögern Sie sie dann für einen bestimmten Zeitraum und führen Sie dann die Rückruffunktion aus.
Der Quellcode-Teil kann im Seitenbetrachter abgerufen werden, wie unten gezeigt:
Hier finden Sie
<html>
<Körper>
<Skript>
document.body.addEventListener("click", function(e) {
console.log('Click:',e.originalTarget);
});
</script>
<h1>JS-Versionsschaltflächen-Assistent</h1>
<div>
1. Schaltfläche:<br>
<button style="width: 100px; height:100px;" onclick="alert('1 wurde angeklickt');">1</button>
<button style="width: 100px; height:100px;" onclick="alert('2 was clicked');">2</button>
<br>
<br>
2. Eingabefeld:
<input type="text" value="">
<br>
<br>
3. Link: <a href="http://jshaman.com" target="iframe1">jshaman.com</a>
<br>
<iframe name="iframe1"></iframe>
</div>
<br>
<hr>
<button onclick="fun1();">Automatische Ausführung starten</button>
<br>
Gehen Sie wie folgt der Reihe nach vor:<br>
1. Klicken Sie auf die erste und zweite Schaltfläche. 2. Legen Sie den Fokus für das Eingabefeld fest. 4. Klicken Sie auf den Link.
<br>
</body>
<Skript>
//Klickereignis//Parameter:
//outer_html: Quellcode des anzuklickenden Elements //delay: Verzögerung //call_back: Callback-Funktion function click(outer_html, delay, call_back){
//Alle Elemente der Seite abrufen var all_elements = document.querySelectorAll('*');
//Elemente durchlaufen for(i=0; i<all_elements.length; i++){
//Elemente abgleichen, die die Bedingungen erfüllen if(all_elements[i].outerHTML==outer_html){
//Klicken Sie auf all_elements[i].click();
}
}
if(delay && call_back){
//Führen Sie die Rückruffunktion setTimeout(call_back, delay) aus, nachdem wie viele Millisekunden vergangen sind
}
};
//Fokus setzen, also auswählen //Parameter:
//outer_html: Quellcode des Elements //delay: Verzögerung //call_back: Rückruffunktion function focus(outer_html, delay, call_back){
//Alle Elemente der Seite abrufen var all_elements = document.querySelectorAll('*');
//Elemente durchlaufen for(i=0; i<all_elements.length; i++){
//Elemente abgleichen, die die Bedingungen erfüllen if(all_elements[i].outerHTML==outer_html){
//Fokus setzen all_elements[i].focus();
}
}
if(delay && call_back){
//Führen Sie die Rückruffunktion setTimeout(call_back, delay) aus, nachdem wie viele Millisekunden vergangen sind
}
};
//Inhaltsfunktion festlegen setvalue(outer_html, type, value, delay, call_back){
//Alle Elemente der Seite abrufen var all_elements = document.querySelectorAll('*');
//Elemente durchlaufen for(i=0; i<all_elements.length; i++){
//Elemente abgleichen, die die Bedingungen erfüllen if(all_elements[i].outerHTML==outer_html){
//Klicken Sie auf all_elements[i][type] = value;
}
}
if(delay && call_back){
//Führen Sie die Rückruffunktion setTimeout(call_back, delay) aus, nachdem wie viele Millisekunden vergangen sind
}
};
//Klicken Sie auf die Schaltflächenfunktion fun1(){
//Der Quellcode des anzuklickenden Elements var äußere_html = `<button style="width: 100px; height:100px;" onclick="alert('1 was clicked');">1</button>`;
click(outer_html, 1000, fun2);
}
//Klicken Sie auf die Schaltflächenfunktion fun2(){
//Der Quellcode des anzuklickenden Elements var äußere_html = `<button style="width: 100px; height:100px;" onclick="alert('2 was clicked');">2</button>`;
click(outer_html, 1000, fun3);
}
//Fokus und Wert für Eingabefunktion setzen fun3(){
//Der Quellcode des anzuklickenden Elements var äußere_html = `<input type="text" value="">`;
focus(outer_html);
setvalue(outer_html,"value",abc",1000,call_back_function)
}
//Klicken Sie auf die Linkfunktion call_back_function(){
var out_html = `<a href="http://jshaman.com" target="iframe1">jshaman.com</a>`;
click(out_html);
console.log("Automatischer Klick abgeschlossen")
}
</script>
</html> JavaScript mit offener und transparenter kann die Funktionslogik leicht verstehen und auch nach Belieben geändert werden. Wenn Sie die Codesicherheit verbessern möchten, sollten Sie Ihren Code durch Verschlüsselung schützen. Sie können beispielsweise JShaman verwenden, ein professionelles Verschlüsselungstool zur Verschleierung von JavaScript-Code. Der JavaScript-Code im vollständigen Quellcode oben nimmt nach der Verschlüsselung durch JShaman die folgende Form an und seine Verwendung wird in keiner Weise beeinträchtigt:
Hinweis: Die linke Seite ist der Originalcode und die rechte Seite ist der verschlüsselte Code.
Verwandte Empfehlungen: [JavaScript-Video-Tutorial]
Das Obige soll Ihnen beibringen, wie Sie JavaScript verwenden, um einen „Schaltflächenassistenten“ zu implementieren! Weitere Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
