溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹利用JavaScript怎么實現一個瀏覽器網頁自動滾動功能，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
1. 打開瀏覽器控制臺窗口
JavaScript通常是作為開發Web頁面的腳本語言，本文介紹的JavaScript代碼均運行在指定網站的控制臺窗口。一般瀏覽器的開發者窗口都可以通過在當前網頁界面按F12快捷鍵調出，然后在上面的標簽欄找到Console點擊就是控制臺窗口，在這里可以直接執行JavaScript代碼，而chrome系瀏覽器的控制臺界面可以使用快捷鍵Ctrl+Shift+J直接打開
2. 實時查看鼠標坐標
首先為了獲取當前的鼠標位置的x、y坐標，需要先重寫一個onmousemove函數來幫助我們實時查看光標處的x、y值，方便下一步編寫代碼時確定初始的y坐標和每次y方向滾動的距離
// 在控制臺輸入以下內容并回車，即可查看當前鼠標位置
// 具體查看方式：鼠標在網頁上滑動時無效果，當鼠標懸停時即可在光標旁邊看到此處的坐標
document.onmousemove = function(e){
var x = e.pageX;
var y = e.pageY;
e.target.title = "X is "+x+" and Y is "+y;
};3. 編寫自動滾動代碼
具體代碼如下，將代碼粘貼進控制臺并回車，然后調用auto_scroll()函數（具體參數含義在代碼注釋查看）即可運行
// y軸是在滾動的，每次不一樣；x坐標也每次從這些里面隨機一個
var random_x = [603, 811, 672, 894, 999, 931, 970, 1001, 1037, 1076, 1094];
// 初始y坐標
var position = 200;
// 最大執行max_num次就多休眠一下
var max_num = 20;
// 單位是秒，每當cnt%max_num為0時就休眠指定時間（從數組中任選一個），單位是秒
var sleep_interval = [33, 23, 47, 37, 21, 28, 30, 16, 44];
// 當前正在執行第幾次
var cnt = 0;
// 相當于random_choice的功能
function choose(choices)
{
var index = Math.floor(Math.random() * choices.length);
return choices[index];
};
// 相當于廣泛的random，返回浮點數
function random(min_value, max_value)
{
return min_value + Math.random() * (max_value - min_value);
};
// 模擬點擊鼠標
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("坐標 ("+x+", "+y+") 被點擊");
} catch (error) {
console.log("坐標 ("+x+", "+y+") 處不存在元素，無法點擊")
}
};
// 定時器的含參回調函數
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("滾動到坐標("+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休眠已經結束');
}else
{
// 長休眠，且不滑動，的回調函數
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休眠已經結束');
}
}else
{
cnt = 0;
console.log("一輪共計"+max_num+"次點擊結束");
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休眠已經結束（長休眠且不滑動）');
}
};
// 自動滾動網頁的啟動函數
// auto_scroll(5, 10, 50, 200)表示每隔5~10秒滾動一次；每次滾動的距離為50~200高度
function 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休眠已經結束');
};
/*
---------以下內容無需用到，根據情況使用----------
// 自定義click的回調函數
// 若綁定到元素，則點擊該元素會出現此效果
function click_func(e)
{
var a = new Array("富強","民主","文明","和諧","自由","平等","公正","法治","愛國","敬業","誠信","友善");
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();
});
};
// 在控制臺輸入以下內容，即可查看當前鼠標位置
document.onmousemove = function(e){
var x = e.pageX;
var y = e.pageY;
e.target.title = "X is "+x+" and Y is "+y;
};
*/關于利用JavaScript怎么實現一個瀏覽器網頁自動滾動功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
