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代码
Mar 27 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
详解AngularJS ng-class样式切换
Jun 27 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
Webpack的Loader和Plugin的区别
Nov 09 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
php 文章采集正则代码
2009/12/28 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
php长字符串定义方法
2012/07/12 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
python实现的各种排序算法代码
2013/03/04 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
2014教师党员自我评议总结
2014/09/19 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
综合测评个人总结
2015/03/03 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
HttpClient实现文件上传功能
2022/08/14 Java/Android