las herramientas de automatización de Key Wizard, como Key Wizard, pueden liberar nuestras manos y ayudarnos a completar muchas tareas automáticamente. En muchos escenarios, pueden mejorar enormemente la productividad.
Este artículo demostrará: Uso de JavaScript para implementar un "asistente de botones" para demostrar la finalización automática de operaciones de clic, enfoque, entrada y otras.
Como se muestra en la animación anterior, las siguientes operaciones se realizan automáticamente en la página:
1. Haga clic en dos botones con un segundo de diferencia
2. Establezca el foco en el cuadro de entrada
3. Ingrese texto en el cuadro de entrada
4. Haga clic para abrir el; link;
principioNo es complicado, simplemente obtenga el elemento y ejecute clic, enfoque y otros eventos.
Hay dos dificultades:
1. Para elementos sin ID y nombre, no puede usar getElementById y getElementByName. ¿Cómo ubicarlos?
La solución es: usar querySelectorAll para obtener todos los elementos en la página y luego usar la coincidencia del código fuente para ubicarlos con precisión. elementos. El código es el siguiente:
2. Cómo configurar el retraso: después de hacer clic en una ubicación, espere unos segundos antes de realizar la siguiente operación.
La solución es: utilizar setTimeOut y funciones de devolución de llamada. El código es el siguiente:
. De acuerdo con los principios descritos anteriormente, prepare las funciones de clic, enfoque y asignación de la siguiente manera:
Al llamar, pase el código fuente, el valor de retraso y la función de devolución de llamada.
Es decir: operar sobre los elementos del código fuente especificado, luego retrasarlo durante un cierto período de tiempo y luego ejecutar la función de devolución de llamada.
La parte del código fuente se puede obtener en el visor de páginas, como se muestra a continuación:
se proporciona aquí y se proporciona el código completo del ejemplo anterior. Guárdelo como html y ejecútelo.
<html>
<cuerpo>
<guión>
document.body.addEventListener("hacer clic", función(e) {
console.log('Hacer clic:',e.originalTarget);
});
</script>
<h1>Asistente del botón de versión JS</h1>
<div>
1. Botón:<br>
<button style="ancho: 100px; alto:100px;" onclick="alert('Se hizo clic en 1');">1</button>
<button style="ancho: 100px; alto:100px;" onclick="alert('Se hizo clic en 2');">2</button>
<br>
<br>
2. Cuadro de entrada:
<tipo de entrada="texto" valor="">
<br>
<br>
3. Enlace: <a href="http://jshaman.com" target="iframe1">jshaman.com</a>
<br>
<iframe nombre="iframe1"></iframe>
</div>
<br>
<hora>
<button onclick="fun1();">Iniciar ejecución automática</button>
<br>
Haga lo siguiente en orden:<br>
1. Haga clic en el primer y segundo botón; 2. Establezca el foco para el cuadro de entrada; 3. Establezca el valor para el cuadro de entrada: abc;
<br>
</cuerpo>
<guión>
//Evento de clic//Parámetros:
//outer_html: código fuente del elemento en el que se hará clic //delay: delay //call_back: función de devolución de llamada function click(outer_html, delay, call_back){
//Obtener todos los elementos de la página var all_elements = document.querySelectorAll('*');
//Recorrer elementos for(i=0; i<all_elements.length; i++){
//Hace coincidir elementos que cumplen las condiciones if(all_elements[i].outerHTML==outer_html){
//Haga clic en all_elements[i].click();
}
}
si(retraso && call_back){
//Ejecuta la función de devolución de llamada setTimeout(call_back, delay) después de cuántos milisegundos hayan pasado
}
};
//Establecer foco, es decir, seleccionar //Parámetros:
//outer_html: código fuente del elemento //delay: delay //call_back: función de devolución de llamada function focus(outer_html, delay, call_back){
//Obtener todos los elementos de la página var all_elements = document.querySelectorAll('*');
//Recorrer elementos for(i=0; i<all_elements.length; i++){
//Hace coincidir elementos que cumplen las condiciones if(all_elements[i].outerHTML==outer_html){
//Establecer foco all_elements[i].focus();
}
}
si(retraso && call_back){
//Ejecuta la función de devolución de llamada setTimeout(call_back, delay) después de cuántos milisegundos hayan pasado
}
};
//Establecer función de contenido setvalue(outer_html, tipo, valor, retraso, call_back){
//Obtener todos los elementos de la página var all_elements = document.querySelectorAll('*');
//Recorrer elementos for(i=0; i<all_elements.length; i++){
//Hace coincidir elementos que cumplen las condiciones if(all_elements[i].outerHTML==outer_html){
//Haga clic en all_elements[i][tipo] = valor;
}
}
si(retraso && call_back){
//Ejecuta la función de devolución de llamada setTimeout(call_back, delay) después de cuántos milisegundos hayan pasado
}
};
//Haga clic en la función del botón fun1(){
//El código fuente del elemento en el que se hará clic var outside_html = `<button style="width: 100px; height:100px;" onclick="alert('1 fue hecho clic');">1</button>`;
hacer clic (outer_html, 1000, fun2);
}
//Haga clic en la función del botón fun2(){
//El código fuente del elemento en el que se hará clic var outside_html = `<button style="width: 100px; height:100px;" onclick="alert('2 was clicked');">2</button>`;
hacer clic (outer_html, 1000, fun3);
}
//Establece el foco y el valor para la función de entrada fun3(){
// El código fuente del elemento en el que se hará clic var external_html = `<input type="text" value="">`;
enfoque (exterior_html);
setvalue(outer_html,"valor","abc",1000,call_back_function)
}
//Haga clic en la función de enlace call_back_function(){
var out_html = `<a href="http://jshaman.com" target="iframe1">jshaman.com</a>`;
hacer clic (out_html);
console.log("Clic automático completado")
}
</script>
</html> JavaScript con puede comprender fácilmente la lógica funcional y también puede modificarse a voluntad. Si desea mejorar la seguridad del código, debe protegerlo con cifrado. Por ejemplo, puede utilizar JShaman, una herramienta profesional de cifrado de ofuscación de código JavaScript. El código JavaScript en el código fuente completo anterior tendrá el siguiente formato después de ser cifrado por JShaman, y su uso no se verá afectado de ninguna manera:
Nota: El lado izquierdo es el código original y el lado derecho es el código cifrado.
Recomendaciones relacionadas: [Tutorial en vídeo de JavaScript] ¡
Lo anterior es para enseñarle cómo utilizar JavaScript para implementar un "asistente de botones"! Para obtener más detalles, preste atención a otros artículos relacionados en el sitio web chino de php.
