JavaScript實(shí)現(xiàn)瀏覽器網(wǎng)頁(yè)自動(dòng)滾動(dòng)并點(diǎn)擊的示例代碼
1. 打開(kāi)瀏覽器控制臺(tái)窗口
JavaScript通常是作為開(kāi)發(fā)Web頁(yè)面的腳本語(yǔ)言,本文介紹的JavaScript代碼均運(yùn)行在指定網(wǎng)站的控制臺(tái)窗口。一般瀏覽器的開(kāi)發(fā)者窗口都可以通過(guò)在當(dāng)前網(wǎng)頁(yè)界面按F12快捷鍵調(diào)出,然后在上面的標(biāo)簽欄找到Console點(diǎn)擊就是控制臺(tái)窗口,在這里可以直接執(zhí)行JavaScript代碼,而chrome系瀏覽器的控制臺(tái)界面可以使用快捷鍵Ctrl+Shift+J直接打開(kāi)
2. 實(shí)時(shí)查看鼠標(biāo)坐標(biāo)
首先為了獲取當(dāng)前的鼠標(biāo)位置的x、y坐標(biāo),需要先重寫一個(gè)onmousemove函數(shù)來(lái)幫助我們實(shí)時(shí)查看光標(biāo)處的x、y值,方便下一步編寫代碼時(shí)確定初始的y坐標(biāo)和每次y方向滾動(dòng)的距離
// 在控制臺(tái)輸入以下內(nèi)容并回車,即可查看當(dāng)前鼠標(biāo)位置 // 具體查看方式:鼠標(biāo)在網(wǎng)頁(yè)上滑動(dòng)時(shí)無(wú)效果,當(dāng)鼠標(biāo)懸停時(shí)即可在光標(biāo)旁邊看到此處的坐標(biāo) document.onmousemove = function(e){ var x = e.pageX; var y = e.pageY; e.target.title = "X is "+x+" and Y is "+y; };
3. 編寫自動(dòng)滾動(dòng)代碼
具體代碼如下,將代碼粘貼進(jìn)控制臺(tái)并回車,然后調(diào)用auto_scroll()函數(shù)(具體參數(shù)含義在代碼注釋查看)即可運(yùn)行
// y軸是在滾動(dòng)的,每次不一樣;x坐標(biāo)也每次從這些里面隨機(jī)一個(gè) var random_x = [603, 811, 672, 894, 999, 931, 970, 1001, 1037, 1076, 1094]; // 初始y坐標(biāo) var position = 200; // 最大執(zhí)行max_num次就多休眠一下 var max_num = 20; // 單位是秒,每當(dāng)cnt%max_num為0時(shí)就休眠指定時(shí)間(從數(shù)組中任選一個(gè)),單位是秒 var sleep_interval = [33, 23, 47, 37, 21, 28, 30, 16, 44]; // 當(dāng)前正在執(zhí)行第幾次 var cnt = 0; // 相當(dāng)于random_choice的功能 function choose(choices) { var index = Math.floor(Math.random() * choices.length); return choices[index]; }; // 相當(dāng)于廣泛的random,返回浮點(diǎn)數(shù) function random(min_value, max_value) { return min_value + Math.random() * (max_value - min_value); }; // 模擬點(diǎn)擊鼠標(biāo) function click(x, y) { // x = x - window.pageXOffset; // y = y - window.pageYOffset; y = y + 200; try { var ele = document.elementFromPoint(x, y); ele.click(); console.log("坐標(biāo) ("+x+", "+y+") 被點(diǎn)擊"); } catch (error) { console.log("坐標(biāo) ("+x+", "+y+") 處不存在元素,無(wú)法點(diǎn)擊") } }; // 定時(shí)器的含參回調(diào)函數(shù) function setTimeout_func_range(time_min, time_max, step_min, step_max, short_sleep=true) { if(cnt<max_num) { cnt = cnt + 1; if(short_sleep) { // 短休眠 position = position + random(step_min, step_max); x = choose(random_x); scroll(x, position); console.log("滾動(dòng)到坐標(biāo)("+x+", "+position+")"); click(x, position); time = random(time_min, time_max)*1000; console.log("開(kāi)始" + time/1000 + 's休眠'); setTimeout(setTimeout_func_range, time, time_min, time_max, step_min, step_max); // console.log(time/1000 + 's休眠已經(jīng)結(jié)束'); }else { // 長(zhǎng)休眠,且不滑動(dòng),的回調(diào)函數(shù) time = random(time_min, time_max)*1000; console.log("開(kāi)始" + time/1000 + 's休眠'); setTimeout(setTimeout_func_range, time, time_min, time_max, step_min, step_max); // console.log(time/1000 + 's休眠已經(jīng)結(jié)束'); } }else { cnt = 0; console.log("一輪共計(jì)"+max_num+"次點(diǎn)擊結(jié)束"); time = choose(sleep_interval)*1000; console.log("開(kāi)始" + time/1000 + 's休眠'); setTimeout(setTimeout_func_range, time, time_min, time_max, step_min, step_max, false); // console.log(time/1000 + 's休眠已經(jīng)結(jié)束(長(zhǎng)休眠且不滑動(dòng))'); } }; // 自動(dòng)滾動(dòng)網(wǎng)頁(yè)的啟動(dòng)函數(shù) // auto_scroll(5, 10, 50, 200)表示每隔5~10秒滾動(dòng)一次;每次滾動(dòng)的距離為50~200高度 function auto_scroll(time_min, time_max, step_min, step_max) { time = random(time_min, time_max)*1000; console.log("開(kāi)始" + time/1000 + 's休眠'); setTimeout(setTimeout_func_range, time, time_min, time_max, step_min, step_max); // console.log(time/1000 + 's休眠已經(jīng)結(jié)束'); }; /* ---------以下內(nèi)容無(wú)需用到,根據(jù)情況使用---------- // 自定義click的回調(diào)函數(shù) // 若綁定到元素,則點(diǎn)擊該元素會(huì)出現(xiàn)此效果 function click_func(e) { var a = new Array("富強(qiáng)","民主","文明","和諧","自由","平等","公正","法治","愛(ài)國(guó)","敬業(yè)","誠(chéng)信","友善"); var $i = $("<span></span>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }; // 在控制臺(tái)輸入以下內(nèi)容,即可查看當(dāng)前鼠標(biāo)位置 document.onmousemove = function(e){ var x = e.pageX; var y = e.pageY; e.target.title = "X is "+x+" and Y is "+y; }; */
代碼運(yùn)行效果如下
以上就是JavaScript實(shí)現(xiàn)瀏覽器網(wǎng)頁(yè)的自動(dòng)滾動(dòng)并點(diǎn)擊的示例代碼的詳細(xì)內(nèi)容,更多關(guān)于JavaScript 瀏覽器自動(dòng)滾動(dòng)點(diǎn)擊的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS獲取表格視圖所選行號(hào)的ids過(guò)程解析
這篇文章主要介紹了JS獲取表格視圖所選行號(hào)的ids過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02js獲取TreeView控件選中節(jié)點(diǎn)的Text和Value值的方法
在實(shí)際項(xiàng)目中,遇到一個(gè)問(wèn)題,首先彈出一個(gè)新窗口,新窗口中放了一個(gè)TreeView控件,現(xiàn)在要解決的是,如何單擊TreeView中一個(gè)節(jié)點(diǎn),返回Text和Value到父頁(yè)面并關(guān)閉該新窗口,本文將詳細(xì)介紹此方法的實(shí)現(xiàn)2012-11-11mui框架 頁(yè)面無(wú)法滾動(dòng)的解決方法(推薦)
下面小編就為大家分享一篇mui框架 頁(yè)面無(wú)法滾動(dòng)的解決方法(推薦),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01JavaScript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下,希望對(duì)你的學(xué)習(xí)有所幫助2022-06-06JavaScript實(shí)現(xiàn)解析INI文件內(nèi)容的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)解析INI文件內(nèi)容的方法,結(jié)合實(shí)例形式分析了javascript通過(guò)自定義函數(shù)實(shí)現(xiàn)針對(duì)ini文件解析操作的相關(guān)處理技巧,需要的朋友可以參考下2016-11-11解決canvas畫布使用fillRect()時(shí)高度出現(xiàn)雙倍效果的問(wèn)題
下面小編就為大家?guī)?lái)一篇解決canvas畫布使用fillRect()時(shí)高度出現(xiàn)雙倍效果的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08JS面向?qū)ο缶幊袒A(chǔ)篇(二) 封裝操作實(shí)例詳解
這篇文章主要介紹了JS面向?qū)ο缶幊谭庋b操作,結(jié)合實(shí)例形式詳細(xì)分析了JS面向?qū)ο蠓庋b操作的相關(guān)概念、原理、使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03