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 相关文章推荐
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 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中的正规表达式(二)
2006/10/09 PHP
php之字符串变相相减的代码
2007/03/19 PHP
PHP编程函数安全篇
2013/01/08 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
Python线性方程组求解运算示例
2018/01/17 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
中学老师的自我评价
2013/11/07 职场文书
甜点店创业计划书
2014/01/27 职场文书
淘宝活动总结范文
2014/06/26 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
树转促学习心得体会
2014/09/10 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书