JavaScript를 사용하여 '키 마법사'를 구현하는 방법을 가르쳐주세요!

藏色散人

풀어 주다： 2022-08-07 10:28:36

앞으로

2594명이 탐색했습니다.

JavaScript 이상한 기술: Key Wizard

Key Wizard와 같은 자동화 도구는 우리의 손을 자유롭게 하고 많은 작업을 자동으로 완료하도록 도와주며 생산성을 크게 향상시킬 수 있습니다.

이 기사에서는 다음을 설명합니다. JavaScript를 사용하여 "키 마법사"를 구현하여 클릭, 포커스, 입력 및 기타 작업의 자동 완성을 보여줍니다.

효과 달성

페이지에서 다음 작업이 자동으로 수행됩니다.

1. 1초 간격으로 두 개의 버튼을 클릭합니다.

3. 입력 상자에 텍스트를 입력하세요.

4. 링크를 열려면 클릭하세요.

기능 원리

원리는 복잡하지 않으며, 클릭 및 포커스 설정과 같은 이벤트를 실행합니다.

두 가지 어려움이 있습니다.

1. ID와 이름이 없는 요소의 경우 getElementById 및 getElementByName을 사용할 수 없습니다. 이를 찾는 방법

해결 방법은 다음과 같습니다. 요소의 위치를 정확하게 지정하려면 소스 코드를 사용하세요. 코드는 다음과 같습니다.

2. 지연 설정 방법: 위치를 클릭한 후 다음 작업을 수행하기 전에 몇 초 정도 기다립니다.

해결책은: setTimeOut 및 콜백 함수를 사용하는 것입니다. 코드는 다음과 같습니다.

키코드에 대한 자세한 설명

앞서 설명한 원리에 따라 클릭, 포커스, 할당 기능을 다음과 같이 준비합니다.

호출 시 소스를 전달합니다. 코드, 지연 값 및 콜백 함수.

즉, 지정된 소스 코드의 요소에 대해 작업을 수행한 다음 일정 시간 동안 지연한 다음 콜백 함수를 실행하는 것입니다.

소스 코드 부분은 아래 그림과 같이 페이지 뷰어에서 얻을 수 있습니다.

전체 소스 코드

위 예제의 전체 코드가 여기에 제공됩니다. html로 저장하고 그것을 실행하십시오.

<html>
<body>
<script>
document.body.addEventListener("click", function(e) {
console.log(&#39;点击：&#39;,e.originalTarget);
});
</script>
<h1>JS版按键精灵</h1>
<div>
一、按钮：<br>
<button style="width: 100px; height:100px;" onclick="alert(&#39;1被点击&#39;);">1</button>
<button style="width: 100px; height:100px;" onclick="alert(&#39;2被点击&#39;);">2</button>
<br>
<br>
二、输入框：
<input type="text" value="">
<br>
<br>
三、链接：<a href="http://jshaman.com" target="iframe1">jshaman.com</a>
<br>
<iframe name="iframe1"></iframe>
</div>
<br>
<hr>
<button onclick="fun1();">开始自动执行</button>
<br>
依次执行以下操作：<br>
1、点击第一、第二按钮；2、给输入框设置焦点；3、给输入框设置值：abc；4、点击链接；
<br>
</body>
<script>
//点击事件
//参数：
//outer_html：要点击的元素源码
//delay：延时
//call_back：回调函数
function click(outer_html, delay, call_back){
//获取页面所有元素
var all_elements = document.querySelectorAll(&#39;*&#39;);
//遍历元素
for(i=0; i<all_elements.length; i++){
//匹配符合条件的元素
if(all_elements[i].outerHTML==outer_html){
//点击
all_elements[i].click();
}
}
if(delay && call_back){
//过多少毫秒后执行回调函数
setTimeout(call_back, delay)
}
};
//设置焦点，即选中
//参数：
//outer_html：元素源码
//delay：延时
//call_back：回调函数
function focus(outer_html, delay, call_back){
//获取页面所有元素
var all_elements = document.querySelectorAll(&#39;*&#39;);
//遍历元素
for(i=0; i<all_elements.length; i++){
//匹配符合条件的元素
if(all_elements[i].outerHTML==outer_html){
//设焦点
all_elements[i].focus();
}
}
if(delay && call_back){
//过多少毫秒后执行回调函数
setTimeout(call_back, delay)
}
};
//设置内容
function setvalue(outer_html, type, value, delay, call_back){
//获取页面所有元素
var all_elements = document.querySelectorAll(&#39;*&#39;);
//遍历元素
for(i=0; i<all_elements.length; i++){
//匹配符合条件的元素
if(all_elements[i].outerHTML==outer_html){
//点击
all_elements[i][type] = value;
}
}
if(delay && call_back){
//过多少毫秒后执行回调函数
setTimeout(call_back, delay)
}
};
//点击按钮
function fun1(){
//要点击的元素的源码
var outer_html = `<button style="width: 100px; height:100px;" onclick="alert(&#39;1被点击&#39;);">1</button>`;
click(outer_html, 1000, fun2);
}
//点击按钮
function fun2(){
//要点击的元素的源码
var outer_html = `<button style="width: 100px; height:100px;" onclick="alert(&#39;2被点击&#39;);">2</button>`;
click(outer_html, 1000, fun3);
}
//给input设置焦点和值
function fun3(){
//要点击的元素的源码
var outer_html = `<input type="text" value="">`;
focus(outer_html);
setvalue(outer_html,"value","abc",1000,call_back_function)
}
//点击链接
function call_back_function(){
var out_html = `<a href="http://jshaman.com" target="iframe1">jshaman.com</a>`;
click(out_html);
console.log("已完成自动点击")
}
</script>
</html>

로그인 후 복사

코드 보안

개방적이고 투명한 JavaScript는 기능적 논리를 쉽게 이해하고 마음대로 수정할 수 있습니다. 코드 보안을 강화하려면 암호화를 통해 코드를 보호해야 합니다. 예를 들어, 전문적인 JavaScript 코드 난독화 암호화 도구인 JShaman을 사용할 수 있습니다. 위 전체 소스코드의 자바스크립트 코드는 JShaman에 의해 암호화된 후 다음과 같은 형태가 되며, 사용에는 어떠한 영향도 미치지 않습니다.

참고: 왼쪽이 원본 코드, 오른쪽이 원본 코드입니다. 암호화된 코드입니다.