溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“如何用JavaScript實現一個按鍵精靈”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
按鍵精靈之類的自動化工具，可以解放雙手，幫我們自動完成許多工作，在很多場景中，可以極大提升生產力。
本文將展示：用JavaScript實現一個“按鍵精靈”，演示自動完成點擊、聚焦、輸入等操作。
如上圖動畫，在頁面中，自動執行了如下操作：
1、間隔一秒依次點擊兩個按鈕；
2、給輸入框設置焦點；
3、在輸入框輸入文字；
4、點擊打開鏈接；
原理并不復雜，獲取元素，并執行點擊、設焦點等事件。
難點有兩處：
1、沒有ID、Name的元素，不能使用getElementById、getElementByName，如何對其定位；
解決方法是：使用querySelectorAll獲取頁面所有元素，然后用匹配源碼的方式，精確定位元素。代碼如下：
2、如何設置延時：點擊一個位置后，等待幾秒，再執行下一個操作。
解決方法是：使用setTimeOut及回調函數。代碼如下：
依前面講述的原理，準備好點擊、設焦點、賦值函數，如下：
調用時，傳入源碼、延時值、回調函數。
即：對指定源碼的元素進行操作，然后延時一定時長，再執行回調函數。
其中源碼部分可以在頁面查看器中獲得，如下圖所示：
這里再給出以上示例的完整代碼，保存為html即可運行。
<html>
<body>
<script>
document.body.addEventListener("click", function(e) {
console.log('點擊：',e.originalTarget);
});
</script>
<h2>JS版按鍵精靈</h2>
<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。上面完整源碼中的JavaScript代碼經JShaman加密后，會變成如下形式，而使用不受任何影響：
注：左側為原始代碼，右側為加密后的代碼。
“如何用JavaScript實現一個按鍵精靈”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
