Ferramentas de automação, como Key Wizard, podem liberar nossas mãos e nos ajudar a concluir muitas tarefas automaticamente. Em muitos cenários, podem melhorar muito a produtividade.
Este artigo demonstrará: Usando JavaScript para implementar um "assistente de botão" para demonstrar a conclusão automática de clique, foco, entrada e outras operações.
Conforme mostrado na animação acima, as seguintes operações são executadas automaticamente na página:
1. Clique em dois botões com um segundo de diferença
2. Defina o foco para a caixa de entrada
3. Insirao
texto na caixa de entrada;
link;
princípioNão é complicado, basta pegar o elemento e executar click, focus e outros eventos.
Existem duas dificuldades:
1. Para elementos sem ID e Nome, você não pode usar getElementById e getElementByName Como localizá-los
A solução é: usar querySelectorAll para obter todos os elementos na página e, em seguida, usar a correspondência do código-fonte para localizar com precisão? elementos. O código é o seguinte:
2. Como definir o atraso: Após clicar em um local, aguarde alguns segundos antes de realizar a próxima operação.
A solução é: usar funções setTimeOut e callback. O código é o seguinte:
De acordo com os princípios descritos anteriormente, prepare funções de clique, foco e atribuição, como segue:
Ao chamar, passe o código-fonte, o valor do atraso e a função de retorno de chamada.
Ou seja: opere nos elementos do código-fonte especificado, atrase por um determinado período de tempo e, em seguida, execute a função de retorno de chamada.
A parte do código fonte pode ser obtida no visualizador de páginas, conforme mostrado abaixo:
é fornecido aqui e o código completo do exemplo acima é fornecido.
<html>
<corpo>
<roteiro>
document.body.addEventListener("clique", function(e) {
console.log('Clique:',e.originalTarget);
});
</script>
<h1>Assistente de botão de versão JS</h1>
<div>
1. Botão:<br>
<button style="largura: 100px; altura:100px;" onclick="alert('1 foi clicado');">1</button>
<button style="largura: 100px; altura:100px;" onclick="alert('2 foi clicado');">2</button>
<br>
<br>
2. Caixa de entrada:
<input type="texto" valor="">
<br>
<br>
3. Link: <a href="http://jshaman.com" target="iframe1">jshaman.com</a>
<br>
<iframe name="iframe1"></iframe>
</div>
<br>
<h>
<button onclick="fun1();">Iniciar execução automática</button>
<br>
Faça o seguinte em ordem:<br>
1. Clique no primeiro e no segundo botão; 2. Defina o foco da caixa de entrada; 3. Defina o valor da caixa de entrada: abc;
<br>
</body>
<roteiro>
//Evento de clique //Parâmetros:
//outer_html: código fonte do elemento a ser clicado //delay: delay //call_back: função de retorno de chamada function click(outer_html, delay, call_back){
//Obter todos os elementos da página var all_elements = document.querySelectorAll('*');
//Percorrer elementos for(i=0; i<all_elements.length; i++){
//Corresponde aos elementos que atendem às condições if(all_elements[i].outerHTML==outer_html){
//Clique em all_elements[i].click();
}
}
if(atraso && call_back){
//Executa a função de retorno de chamada setTimeout(call_back, delay) após quantos milissegundos se passaram
}
};
//Definir foco, ou seja, selecionar //Parâmetros:
//outer_html: código fonte do elemento //delay: delay //call_back: função de retorno de chamada function focus(outer_html, delay, call_back){
//Obter todos os elementos da página var all_elements = document.querySelectorAll('*');
//Percorrer elementos for(i=0; i<all_elements.length; i++){
//Corresponde aos elementos que atendem às condições if(all_elements[i].outerHTML==outer_html){
//Definir foco all_elements[i].focus();
}
}
if(atraso && call_back){
//Executa a função de retorno de chamada setTimeout(call_back, delay) após quantos milissegundos se passaram
}
};
//Definir função de conteúdo setvalue(outer_html, type, value, delay, call_back){
//Obter todos os elementos da página var all_elements = document.querySelectorAll('*');
//Percorrer elementos for(i=0; i<all_elements.length; i++){
//Corresponde aos elementos que atendem às condições if(all_elements[i].outerHTML==outer_html){
//Clique em all_elements[i][type] = valor;
}
}
if(atraso && call_back){
//Executa a função de retorno de chamada setTimeout(call_back, delay) após quantos milissegundos se passaram
}
};
//Função do botão de clique fun1(){
//O código fonte do elemento a ser clicado var outer_html = `<button style="width: 100px; height:100px;" onclick="alert('1 foi clicado');">1</button>`;
clique(outer_html, 1000, fun2);
}
//Função do botão de clique fun2(){
//O código fonte do elemento a ser clicado var outer_html = `<button style="width: 100px; height:100px;" onclick="alert('2 was clicked');">2</button>`;
clique(outer_html, 1000, fun3);
}
//Definir foco e valor para função de entrada fun3(){
//O código fonte do elemento a ser clicado var outer_html = `<input type="text" value="">`;
foco(externo_html);
setvalue(outer_html,"valor","abc",1000,call_back_function)
}
//Clique no link function call_back_function(){
var out_html = `<a href="http://jshaman.com" target="iframe1">jshaman.com</a>`;
clique(out_html);
console.log("Clique automático concluído")
}
</script>
</html> JavaScript com pode entender facilmente a lógica funcional e também pode ser modificado à vontade. Se quiser melhorar a segurança do código, você deve protegê-lo com criptografia. Por exemplo, você pode usar JShaman, uma ferramenta profissional de criptografia de ofuscação de código JavaScript. O código JavaScript no código-fonte completo acima terá a seguinte forma após ser criptografado pelo JShaman, e seu uso não será afetado de forma alguma:
Nota: O lado esquerdo é o código original e o lado direito é o código criptografado.
Recomendações relacionadas: [Tutorial de vídeo JavaScript]
O texto acima é para ensiná-lo a usar JavaScript para implementar um "assistente de botão"! Para mais detalhes, preste atenção a outros artigos relacionados no site php chinês!
