les outils d'automatisation de Key Wizard tels que Key Wizard peuvent nous libérer les mains et nous aider à effectuer de nombreuses tâches automatiquement. Dans de nombreux scénarios, cela peut grandement améliorer la productivité.
Cet article démontrera : Utiliser JavaScript pour implémenter un "assistant de bouton" pour démontrer l'exécution automatique des opérations de clic, de focus, de saisie et autres.
Comme le montre l'animation ci-dessus, les opérations suivantes sont automatiquement effectuées sur la page :
1. Cliquez sur deux boutons à une seconde d'intervalle ;
2. Définissez le focus sur la zone de saisie ;
3.Saisissez
le texte dans la zone de saisie ;
lien;
principeCe n'est pas compliqué, il suffit de récupérer l'élément et d'exécuter le clic, le focus et d'autres événements.
Il existe deux difficultés :
1. Pour les éléments sans ID ni nom, vous ne pouvez pas utiliser getElementById et getElementByName. Comment les localiser ?
La solution est la suivante : utilisez querySelectorAll pour obtenir tous les éléments de la page, puis utilisez la correspondance du code source pour localiser avec précision les éléments. éléments. Le code est le suivant :
2. Comment régler le délai : Après avoir cliqué sur un emplacement, attendez quelques secondes avant d'effectuer l'opération suivante.
La solution est la suivante : utilisez les fonctions setTimeOut et callback. Le code est le suivant :
. Selon les principes décrits précédemment, préparez les fonctions de clic, de focus et d'affectation, comme suit :
Lors de l'appel, transmettez le code source, la valeur du délai et la fonction de rappel.
C'est-à-dire : opérer sur les éléments du code source spécifié, puis retarder pendant un certain temps, puis exécuter la fonction de rappel.
La partie du code source peut être obtenue dans la visionneuse de page, comme indiqué ci-dessous :
est donné ici et le code complet de l'exemple ci-dessus est donné. Enregistrez-le au format HTML et exécutez-le.
<html>
<corps>
<script>
document.body.addEventListener("clic", function(e) {
console.log('Cliquez :',e.originalTarget);
});
</script>
<h1>Assistant de bouton de version JS</h1>
<div>
1. Bouton :<br>
<button style="width: 100px; height:100px;" onclick="alert('1 was clicked');">1</button>
<button style="width: 100px; height:100px;" onclick="alert('2 a été cliqué');">2</button>
<br>
<br>
2. Zone de saisie :
<type d'entrée="texte" valeur="">
<br>
<br>
3. Lien : <a href="http://jshaman.com" target="iframe1">jshaman.com</a>
<br>
<iframe name="iframe1"></iframe>
</div>
<br>
<hr>
<button onclick="fun1();">Démarrer l'exécution automatique</button>
<br>
Procédez comme suit dans l'ordre :<br>
1. Cliquez sur les premier et deuxième boutons ; 2. Définissez le focus de la zone de saisie ; 3. Définissez la valeur de la zone de saisie : abc ;
<br>
</corps>
<script>
//Click événement//Paramètres :
//outer_html : code source de l'élément sur lequel cliquer //delay : delay //call_back : fonction de rappel function click(outer_html, delay, call_back){
//Récupère tous les éléments de la page var all_elements = document.querySelectorAll('*');
//Traversez les éléments pour(i=0; i<all_elements.length; i++){
//Faire correspondre les éléments qui remplissent les conditions if(all_elements[i].outerHTML==outer_html){
//Cliquez sur all_elements[i].click();
}
}
if(délai && call_back){
//Exécuter la fonction de rappel setTimeout(call_back, delay) après combien de millisecondes se sont écoulées
}
} ;
//Définir le focus, c'est-à-dire sélectionner //Paramètres :
//outer_html : code source de l'élément //delay : delay //call_back : fonction de rappel function focus(outer_html, delay, call_back){
//Récupère tous les éléments de la page var all_elements = document.querySelectorAll('*');
//Éléments de parcours pour(i=0; i<all_elements.length; i++){
//Faire correspondre les éléments qui remplissent les conditions if(all_elements[i].outerHTML==outer_html){
//Définit le focus all_elements[i].focus();
}
}
if(délai && call_back){
//Exécuter la fonction de rappel setTimeout(call_back, delay) après combien de millisecondes se sont écoulées
}
} ;
//Définir la fonction de contenu setvalue (outer_html, type, valeur, délai, call_back){
//Récupère tous les éléments de la page var all_elements = document.querySelectorAll('*');
//Éléments de parcours pour(i=0; i<all_elements.length; i++){
//Faire correspondre les éléments qui remplissent les conditions if(all_elements[i].outerHTML==outer_html){
//Cliquez sur all_elements[i][type] = value;
}
}
if(délai && call_back){
//Exécuter la fonction de rappel setTimeout(call_back, delay) après combien de millisecondes se sont écoulées
}
} ;
//Cliquez sur la fonction du bouton fun1(){
//Le code source de l'élément sur lequel cliquer var external_html = `<button style="width: 100px; height:100px;" onclick="alert('1 was clicked');">1</button>`;
cliquez (outer_html, 1000, fun2);
}
//Cliquez sur la fonction du bouton fun2(){
//Le code source de l'élément sur lequel cliquer var external_html = `<button style="width: 100px; height:100px;" onclick="alert('2 was clicked');">2</button>`;
cliquez (outer_html, 1000, fun3);
}
//Définir le focus et la valeur pour la fonction d'entrée fun3(){
//Le code source de l'élément sur lequel cliquer var external_html = `<input type="text" value="">`;
focus(extérieur_html);
setvalue(outer_html,"value","abc",1000,call_back_function)
}
//Cliquez sur la fonction de lien call_back_function(){
var out_html = `<a href="http://jshaman.com" target="iframe1">jshaman.com</a>`;
cliquez (out_html);
console.log("Clic automatique terminé")
}
</script>
</html> JavaScript avec peut facilement comprendre la logique fonctionnelle et peut également être modifié à volonté. Si vous souhaitez améliorer la sécurité du code, vous devez protéger votre code par cryptage. Par exemple, vous pouvez utiliser JShaman, un outil professionnel de cryptage d’obscurcissement du code JavaScript. Le code JavaScript dans le code source complet ci-dessus prendra la forme suivante après avoir été chiffré par JShaman, et son utilisation ne sera en aucun cas affectée :
Remarque : le côté gauche est le code original et le côté droit est le code crypté.
Recommandations associées : [Tutoriel vidéo JavaScript]
Ce qui précède a pour but de vous apprendre à utiliser JavaScript pour implémenter un « assistant de bouton » ! Pour plus de détails, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !
