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),需要先重寫(xiě)一個(gè)onmousemove函數(shù)來(lái)幫助我們實(shí)時(shí)查看光標(biāo)處的x、y值,方便下一步編寫(xiě)代碼時(shí)確定初始的y坐標(biāo)和每次y方向滾動(dòng)的距離
// 在控制臺(tái)輸入以下內(nèi)容并回車(chē),即可查看當(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. 編寫(xiě)自動(dòng)滾動(dòng)代碼
具體代碼如下,將代碼粘貼進(jìn)控制臺(tái)并回車(chē),然后調(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)文章
JavaScript函數(shù)柯里化實(shí)現(xiàn)原理及過(guò)程
這篇文章主要介紹了JavaScript函數(shù)柯里化實(shí)現(xiàn)原理及過(guò)程,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
javascript sudoku 數(shù)獨(dú)智力游戲生成代碼
javascript sudoku 數(shù)獨(dú)智力游戲生成代碼,喜歡的朋友可以參考下。2010-03-03
如何利用原生JS實(shí)現(xiàn)觸摸滑動(dòng)監(jiān)聽(tīng)事件
這篇文章主要給大家介紹了關(guān)于如何利用原生JS實(shí)現(xiàn)觸摸滑動(dòng)監(jiān)聽(tīng)事件的相關(guān)資料,文中將實(shí)現(xiàn)的原理以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-06-06
JavaScript使用正則表達(dá)式獲取全部分組內(nèi)容的方法示例
這篇文章主要介紹了JavaScript使用正則表達(dá)式獲取全部分組內(nèi)容的方法,結(jié)合實(shí)例形式分析了javascript正則匹配的相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
JavaScript實(shí)現(xiàn)動(dòng)態(tài)表單生成
這篇文章主要來(lái)和大家一起深入探討如何使用JavaScript實(shí)現(xiàn)一個(gè)動(dòng)態(tài)表單生成器,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2024-01-01
Typescript協(xié)變與逆變簡(jiǎn)單理解
深入學(xué)習(xí)TypeScript類(lèi)型系統(tǒng)的話,逆變、協(xié)變、雙向協(xié)變、不變是繞不過(guò)去的概念。這些概念看起來(lái)挺高大上的,其實(shí)并不復(fù)雜,這篇文章我們就來(lái)學(xué)習(xí)下協(xié)變和逆變吧2022-10-10
關(guān)于JavaScript中的this指向問(wèn)題總結(jié)篇
在小編面試過(guò)程中經(jīng)常會(huì)遇到j(luò)avascript中this指向問(wèn)題,可以說(shuō)是前端面試必問(wèn),下面小編給大家總結(jié)了一下js中this的指向,感興趣的朋友一起學(xué)習(xí)吧2017-07-07
使用JavaScript?將數(shù)據(jù)網(wǎng)格綁定到?GraphQL?服務(wù)的操作方法
GraphQL是管理JavaScript應(yīng)用程序中數(shù)據(jù)的優(yōu)秀工具,本教程展示了GraphQL和SpreadJS如何簡(jiǎn)單地構(gòu)建應(yīng)用程序,?GraphQL?和?SpreadJS都有更多功能可供探索,因此您可以做的事情遠(yuǎn)遠(yuǎn)超出了這個(gè)示例,感興趣的朋友一起看看吧2023-11-11

