快捷導(dǎo)航

JavaScript實現(xiàn)瀏覽器網(wǎng)頁自動滾動并點擊的示例代碼

更新時間：2020年12月05日 09:17:42 作者：zfb132

這篇文章主要介紹了JavaScript實現(xiàn)瀏覽器網(wǎng)頁的自動滾動并點擊的示例代碼，幫助大家更好的理解和學(xué)習(xí)JavaScript的使用，感興趣的朋友可以了解下

1. 打開瀏覽器控制臺窗口

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

2. 實時查看鼠標(biāo)坐標(biāo)

首先為了獲取當(dāng)前的鼠標(biāo)位置的x、y坐標(biāo)，需要先重寫一個onmousemove函數(shù)來幫助我們實時查看光標(biāo)處的x、y值，方便下一步編寫代碼時確定初始的y坐標(biāo)和每次y方向滾動的距離

// 在控制臺輸入以下內(nèi)容并回車，即可查看當(dāng)前鼠標(biāo)位置
// 具體查看方式：鼠標(biāo)在網(wǎng)頁上滑動時無效果，當(dāng)鼠標(biāo)懸停時即可在光標(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. 編寫自動滾動代碼

具體代碼如下，將代碼粘貼進控制臺并回車，然后調(diào)用auto_scroll()函數(shù)（具體參數(shù)含義在代碼注釋查看）即可運行

// y軸是在滾動的，每次不一樣；x坐標(biāo)也每次從這些里面隨機一個
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ù)組中任選一個），單位是秒
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，返回浮點數(shù)
function random(min_value, max_value)
{
 return min_value + Math.random() * (max_value - min_value);
};

// 模擬點擊鼠標(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+") 被點擊");
 } catch (error) {
  console.log("坐標(biāo) ("+x+", "+y+") 處不存在元素，無法點擊")
 }
};

// 定時器的含參回調(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("滾動到坐標(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
  {
   // 長休眠，且不滑動，的回調(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("一輪共計"+max_num+"次點擊結(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é)束（長休眠且不滑動）');
 }
};

// 自動滾動網(wǎng)頁的啟動函數(shù)
// 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休眠已經(jīng)結(jié)束');
};

/*
---------以下內(nèi)容無需用到，根據(jù)情況使用----------
// 自定義click的回調(diào)函數(shù)
// 若綁定到元素，則點擊該元素會出現(xiàn)此效果
function click_func(e)
{
 var a = new Array("富強","民主","文明","和諧","自由","平等","公正","法治","愛國","敬業(yè)","誠信","友善");
 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();
 });
};


// 在控制臺輸入以下內(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;
};
*/

代碼運行效果如下