JavaScript代码模拟鼠标自动点击事件示例


Posted in Javascript onAugust 07, 2020

利用JavaScript代码可以帮助我们实现鼠标的自动点击事件。比如点击了按钮1以后,JavaScript代码会自动去点击下一个按钮,一直点击到按钮5才会停止(可根据实际情况进行相应的调整)。
效果图如下所示:

JavaScript代码模拟鼠标自动点击事件示例

按钮1被点击以后,通过JavaScript的代码自动点击按钮2,代码点击了按钮2之后又会去点击按钮3,以此类推,直到点击到按钮5为止。

JavaScript代码模拟鼠标自动点击事件示例

首先先设置几个按钮,然后再设置一个盒子包裹着一些文字,方便我们在接下来js部分中更换里面的内容时,更加直观的看到它的效果。
HTML代码部分:

JavaScript代码模拟鼠标自动点击事件示例

通过css给这些按钮设置宽度、高度以及边框的样式以及在页面的正中间的上方显示,然后再利用关键帧(@keyframes,考虑到浏览器兼容性的问题,可在关键帧前面加上不同的前缀)给这些文字设置大小、加粗的效果,以及添加颜色的变化,让文字有一个从消失到隐藏再到消失的一个过程。

CSS部分代码:

JavaScript代码模拟鼠标自动点击事件示例

js部分的代码可写在HTML页面中,也可以自行创建一个js的文件,创建好之后就可以开始写页面加载事件,并且通过ID获取到前面HTML中的样式,再然后就是给按钮1添加点击事件,再在点击事件里面嵌套点击事件,注意:为了避免点击事件过快点击,可以利用定时器setTimeout设置点击事件在多长时间后才会去被触发,然后还可以通过设置变量之后再给定时器赋值(e=setTimeout…)方便后面清除定时器也防止点击事件过快而出现BUG。最后就是通过innerHtml来更换HTML中的文字,可以更加直观的看到按钮切换的效果。

JavaScript代码部分:

JavaScript代码模拟鼠标自动点击事件示例

到此这篇关于JavaScript代码模拟鼠标自动点击事件示例的文章就介绍到这了,更多相关JavaScript模拟鼠标自动点击事件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
原生js实现放大镜特效
Mar 08 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 #Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 #Javascript
浅谈javascript如何获取文件后缀名
Aug 07 #Javascript
vue 使用post/get 下载导出文件操作
Aug 07 #Javascript
基于javascript的无缝滚动动画实现2
Aug 07 #Javascript
vue 在methods中调用mounted的实现操作
Aug 07 #Javascript
javascript实现图片轮换动作方法
Aug 07 #Javascript
You might like
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
使用Python绘制图表大全总结
2017/02/11 Python
python日志模块logbook使用方法
2019/09/19 Python
python3 字符串知识点学习笔记
2020/02/08 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
简单租房协议书
2014/04/09 职场文书
人事经理岗位职责
2014/04/28 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
教师工作总结范文2014
2014/11/10 职场文书
担保书范本
2015/01/20 职场文书
不同意离婚答辩状
2015/05/22 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书