站長資訊網(wǎng)
按鍵精靈之類的自動化工具，可以解放雙手，幫我們自動完成許多工作，在很多場景中，可以極大提升生產(chǎn)力。 本文將展示：用JavaScript實現(xiàn)一個“按鍵精靈”，演示自動完成點擊、聚焦、輸入等操作。 如上圖動畫，在頁面中，自動執(zhí)行了如下操作： 1、間隔一秒依次點擊兩個按鈕； 2、給輸入框設置焦點； 3、在輸入框輸入文字； 4、點擊打開鏈接； 原理并不復雜，獲取元素，并執(zhí)行點擊、設焦點等事件。 難點有兩處： 1、沒有ID、Name的元素，不能使用getElementById、getElementByName，如何對其定位； 解決方法是：使用querySelectorAll獲取頁面所有元素，然后用匹配源碼的方式，精確定位元素。代碼如下： 2、如何設置延時：點擊一個位置后，等待幾秒，再執(zhí)行下一個操作。 解決方法是：使用setTimeOut及回調(diào)函數(shù)。代碼如下： 依前面講述的原理，準備好點擊、設焦點、賦值函數(shù)，如下： 調(diào)用時，傳入源碼、延時值、回調(diào)函數(shù)。 即：對指定源碼的元素進行操作，然后延時一定時長，再執(zhí)行回調(diào)函數(shù)。 其中源碼部分可以在頁面查看器中獲得，如下圖所示： 這里再給出以上示例的完整代碼，保存為html即可運行。 公開透明的JavaScript很容易被看懂功能邏輯，也可以被任意修改。如果希望提高代碼安全性，應對代碼加密保護。比如，可以使用專業(yè)的JavaScript代碼混淆加密工具JShaman。上面完整源碼中的JavaScript代碼經(jīng)JShaman加密后，會變成如下形式，而使用不受任何影響： 注：左側(cè)為原始代碼，右側(cè)為加密后的代碼。
JavaScript奇淫技巧：按鍵精靈
實現(xiàn)效果
功能原理
重點代碼詳解
完整源碼
<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();">開始自動執(zhí)行</button> <br> 依次執(zhí)行以下操作：<br> 1、點擊第一、第二按鈕；2、給輸入框設置焦點；3、給輸入框設置值：abc；4、點擊鏈接； <br> </body> <script> //點擊事件 //參數(shù)： //outer_html：要點擊的元素源碼 //delay：延時 //call_back：回調(diào)函數(shù) 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){ //過多少毫秒后執(zhí)行回調(diào)函數(shù) setTimeout(call_back, delay) } }; //設置焦點，即選中 //參數(shù)： //outer_html：元素源碼 //delay：延時 //call_back：回調(diào)函數(shù) 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){ //過多少毫秒后執(zhí)行回調(diào)函數(shù) setTimeout(call_back, delay) } }; //設置內(nèi)容 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){ //過多少毫秒后執(zhí)行回調(diào)函數(shù) 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>
代碼安全性
站長資訊網(wǎng)
最全最豐富的資訊網(wǎng)站
最全最豐富的資訊網(wǎng)站
