JavaScript实现浏览器网页自动滚动并点击的示例代码


Posted in Javascript onDecember 05, 2020

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实现浏览器网页自动滚动并点击的示例代码

以上就是JavaScript实现浏览器网页的自动滚动并点击的示例代码的详细内容,更多关于JavaScript 浏览器自动滚动点击的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 Javascript
15个值得收藏的JavaScript函数
Sep 15 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 #Vue.js
js获取图片的base64编码并压缩
Dec 05 #Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 #Javascript
可拖拽组件slider.js使用方法详解
Dec 04 #Javascript
js实现复制粘贴的两种方法
Dec 04 #Javascript
echarts浮动显示单位的实现方法示例
Dec 04 #Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 #Javascript
You might like
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
ajax异步请求详解
2017/01/06 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
js 概率计算(简单版)
2017/09/12 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
python解决字典中的值是列表问题的方法
2013/03/04 Python
python 重定向获取真实url的方法
2018/05/11 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
python实现逻辑回归的示例
2020/10/09 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
银行求职信范文
2014/05/26 职场文书
不错的求职信范文
2014/07/20 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
端午节活动总结
2014/08/26 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
大学生暑期实践报告
2015/07/13 职场文书
计算机教师工作总结
2015/08/13 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
mysql知识点整理
2021/04/05 MySQL