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