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 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 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实现简单洗牌算法
2013/06/18 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
Python yield与实现方法代码分析
2018/02/06 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
Python @property原理解析和用法实例
2020/02/11 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
电大毕业自我鉴定
2014/02/03 职场文书
企业员工培训感言
2014/02/26 职场文书
六年级学生评语
2014/04/22 职场文书
疾病捐款倡议书
2014/05/13 职场文书
信息管理专业自荐书
2014/06/05 职场文书
家庭贫困证明
2014/09/23 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
离职感谢信怎么写
2015/01/22 职场文书
公路施工安全责任书
2015/05/08 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
自信主题班会
2015/08/14 职场文书
MySQL数据库完全卸载的方法
2022/03/03 MySQL