Key Wizard와 같은 자동화 도구는 우리의 손을 자유롭게 하고 많은 시나리오에서 많은 작업을 자동으로 완료하도록 도와주며 생산성을 크게 향상시킬 수 있습니다.
이 기사에서는 다음을 설명합니다. JavaScript를 사용하여 "버튼 마법사"를 구현하여 클릭, 포커스, 입력 및 기타 작업의 자동 완료를 보여줍니다.
위 애니메이션에서 볼 수 있듯이 페이지에서는 다음 작업이 자동으로 수행됩니다.
1. 1초 간격으로 두 개의 버튼을 클릭합니다.
2. 입력 상자에 포커스를 설정합니다.
3. 입력 상자에 텍스트를 입력합니다
. 링크;
원리 복잡하지 않습니다. 요소를 가져와서 클릭, 포커스 및 기타 이벤트를 실행하기만 하면 됩니다.
두 가지 어려움이 있습니다:
1. ID와 이름이 없는 요소의 경우 getElementById 및 getElementByName을 사용할 수 없습니다.
해결 방법은 다음과 같습니다. querySelectorAll을 사용하여 페이지의 모든 요소를 얻은 다음 소스 코드 일치를 사용하여 정확하게 찾습니다. 강요. 코드는 다음과 같습니다:
2. 지연 설정 방법: 위치를 클릭한 후 다음 작업을 수행하기 전에 몇 초 정도 기다리십시오.
해결책은 setTimeOut 및 콜백 함수를 사용하는 것입니다. 코드는 다음과 같습니다:
앞에서 설명한 원리에 따라 다음과 같이 클릭, 포커스, 할당 기능을 준비합니다.
호출 시 소스 코드, 지연 값, 콜백 함수를 전달합니다.
즉, 지정된 소스 코드의 요소에 대해 작업을 수행한 다음 일정 시간 동안 지연한 다음 콜백 함수를 실행합니다.
소스 코드 부분은 아래와 같이 페이지 뷰어에서 얻을 수 있습니다.
제공되며 위 예제의 전체 코드가 제공됩니다. html로 저장하고 실행하세요.
<html>
<본문>
<스크립트>
document.body.addEventListener("클릭", function(e) {
console.log('클릭:',e.originalTarget);
});
</script>
<h1>JS 버전 버튼 마법사</h1>
<div>
1. 버튼:<br>
<button style="width: 100px; height:100px;" onclick="alert('1개 클릭됨');">1</button>
<button style="너비: 100px; 높이:100px;" onclick="alert('2번 클릭됨');">2</button>
<br>
<br>
2. 입력 상자:
<입력 유형="텍스트" 값="">
<br>
<br>
3. 링크: <a href="http://jshaman.com" target="iframe1">jshaman.com</a>
<br>
<iframe 이름="iframe1"></iframe>
</div>
<br>
<시간>
<button onclick="fun1();">자동 실행 시작</button>
<br>
다음을 순서대로 수행하세요.<br>
1. 첫 번째와 두 번째 버튼을 클릭합니다. 2. 입력 상자에 포커스를 설정합니다. 3. 입력 상자에 대한 값을 설정합니다. 4. 링크를 클릭합니다.
<br>
</body>
<스크립트>
//클릭 이벤트//매개변수:
//outer_html: 클릭할 요소의 소스 코드 //delay: 지연 //call_back: 콜백 함수 function click(outer_html, Delay, call_back){
//페이지의 모든 요소 가져오기 var all_elements = document.querySelectorAll('*');
//요소 탐색 for(i=0; i<all_elements.length; i++){
//조건을 만족하는 요소 일치 if(all_elements[i].outerHTML==outer_html){
//모든 요소 클릭[i].click();
}
}
if(지연 && 콜백){
//몇 밀리초가 지난 후 콜백 함수 setTimeout(call_back, 지연)을 실행합니다.
}
};
//포커스를 설정합니다. 즉, //매개변수를 선택합니다.
//outer_html: 요소 소스 코드 //delay: 지연 //call_back: 콜백 함수 function focus(outer_html, 지연, call_back){
//페이지의 모든 요소 가져오기 var all_elements = document.querySelectorAll('*');
//요소 탐색 for(i=0; i<all_elements.length; i++){
//조건을 만족하는 요소 일치 if(all_elements[i].outerHTML==outer_html){
//포커스 설정 all_elements[i].focus();
}
}
if(지연 && 콜백){
//몇 밀리초가 지난 후 콜백 함수 setTimeout(call_back, 지연)을 실행합니다.
}
};
//콘텐츠 함수 설정 setvalue(outer_html, type, value, Delay, call_back){
//페이지의 모든 요소 가져오기 var all_elements = document.querySelectorAll('*');
//요소 탐색 for(i=0; i<all_elements.length; i++){
//조건을 만족하는 요소 일치 if(all_elements[i].outerHTML==outer_html){
//all_elements 클릭[i][type] = value;
}
}
if(지연 && 콜백){
//몇 밀리초가 지난 후 콜백 함수 setTimeout(call_back, 지연)을 실행합니다.
}
};
//버튼 클릭 함수 fun1(){
//클릭할 요소의 소스 코드 var external_html = `<button style="width: 100px; height:100px;" onclick="alert('1 was clicked');">1</button>`;
클릭(outer_html, 1000, fun2);
}
//버튼 클릭 함수 fun2(){
//클릭할 요소의 소스 코드 var external_html = `<button style="width: 100px; height:100px;" onclick="alert('2 was clicked');">2</button>`;
클릭(outer_html, 1000, fun3);
}
//입력 함수 fun3(){에 대한 포커스 및 값 설정
//클릭할 요소의 소스 코드 var external_html = `<input type="text" value="">`;
초점(outer_html);
setvalue(outer_html,"value","abc",1000,call_back_function)
}
//링크 함수를 클릭합니다. call_back_function(){
var out_html = `<a href="http://jshaman.com" target="iframe1">jshaman.com</a>`;
클릭(out_html);
console.log("자동클릭 완료")
}
</script>
</html> 개방적이고 투명한 기능적 논리를 쉽게 이해할 수 있으며 마음대로 수정할 수도 있습니다. 코드 보안을 강화하려면 암호화를 통해 코드를 보호해야 합니다. 예를 들어 전문적인 JavaScript 코드 난독화 암호화 도구인 JShaman을 사용할 수 있습니다. 위의 전체 소스 코드에 포함된 JavaScript 코드는 JShaman에 의해 암호화된 후 다음과 같은 형태가 되며 사용에는 어떠한 영향도 미치지 않습니다.
참고: 왼쪽은 원본 코드이고 오른쪽은 암호화된 코드입니다.
관련 권장 사항: [JavaScript 비디오 튜토리얼]
위는 JavaScript를 사용하여 "버튼 마법사"를 구현하는 방법을 가르치는 것입니다! 더 자세한 사항은 PHP 중국어 홈페이지의 다른 관련 글을 참고해주세요!
