1. 打開瀏覽器控制臺(tái)窗口

JavaScript通常是作為開發(fā)Web頁(yè)面的腳本語(yǔ)言，本文介紹的JavaScript代碼均運(yùn)行在指定網(wǎng)站的控制臺(tái)窗口。一般瀏覽器的開發(fā)者窗口都可以通過在當(dāng)前網(wǎng)頁(yè)界面按F12快捷鍵調(diào)出，然后在上面的標(biāo)簽欄找到Console點(diǎn)擊就是控制臺(tái)窗口，在這里可以直接執(zhí)行JavaScript代碼，而chrome系瀏覽器的控制臺(tái)界面可以使用快捷鍵Ctrl+Shift+J直接打開

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('開始' + 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('開始' + 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('開始' + 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高度f(wàn)unction auto_scroll(time_min, time_max, step_min, step_max){ time = random(time_min, time_max)*1000; console.log('開始' + 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)','民主','文明','和諧','自由','平等','公正','法治','愛國(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)注好吧啦網(wǎng)其它相關(guān)文章！