JavaScript를 사용하여 '키 마법사'를 구현하는 방법을 가르쳐주세요!
- 藏色散人앞으로
- 2022-08-07 10:28:362629검색
JavaScript 이상한 기술: Key Wizard
Key Wizard와 같은 자동화 도구는 우리의 손을 자유롭게 하고 많은 작업을 자동으로 완료하도록 도와주며 생산성을 크게 향상시킬 수 있습니다.
이 기사에서는 다음을 설명합니다. JavaScript를 사용하여 "키 마법사"를 구현하여 클릭, 포커스, 입력 및 기타 작업의 자동 완성을 보여줍니다.
효과 달성
페이지에서 다음 작업이 자동으로 수행됩니다.
1. 1초 간격으로 두 개의 버튼을 클릭합니다.
2.
3. 입력 상자에 텍스트를 입력하세요. 4. 링크를 열려면 클릭하세요. 기능 원리원리는 복잡하지 않으며, 클릭 및 포커스 설정과 같은 이벤트를 실행합니다. 두 가지 어려움이 있습니다. 1. ID와 이름이 없는 요소의 경우 getElementById 및 getElementByName을 사용할 수 없습니다. 이를 찾는 방법 해결 방법은 다음과 같습니다. 요소의 위치를 정확하게 지정하려면 소스 코드를 사용하세요. 코드는 다음과 같습니다.
<html>
<body>
<script>
document.body.addEventListener("click", function(e) {
console.log('点击：',e.originalTarget);
});
</script>
<h1>JS版按键精灵</h1>
<div>
一、按钮：<br>
<button style="width: 100px; height:100px;" onclick="alert('1被点击');">1</button>
<button style="width: 100px; height:100px;" onclick="alert('2被点击');">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('*');
//遍历元素
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('*');
//遍历元素
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('*');
//遍历元素
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('1被点击');">1</button>`;
click(outer_html, 1000, fun2);
}
//点击按钮
function fun2(){
//要点击的元素的源码
var outer_html = `<button style="width: 100px; height:100px;" onclick="alert('2被点击');">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에 의해 암호화된 후 다음과 같은 형태가 되며, 사용에는 어떠한 영향도 미치지 않습니다.
JavaScript 비디오 튜토리얼]
위 내용은 JavaScript를 사용하여 '키 마법사'를 구현하는 방법을 가르쳐주세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제