首頁

web前端

js教程

教你用JavaScript實作一個「按鍵精靈」！

藏色散人

Aug 07, 2022 am 10:28 AM

javascript

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(&#39;点击：&#39;,e.originalTarget);
});
</script>
<h1 id="JS版按键精灵">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。上面完整原始碼中的JavaScript程式碼經JShaman加密後，會變成如下形式，而使用不受任何影響：

註：左側為原始程式碼，右側為加密後的代碼。

相關推薦：【

JavaScript影片教學】

以上是教你用JavaScript實作一個「按鍵精靈」！的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：csdn。如有侵權，請聯絡admin@php.cn刪除

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

See all articles