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 相关文章推荐
extjs fckeditor集成代码
May 10 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
Bootstrap精简教程
Nov 27 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 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获取发送给用户的header信息的方法
2015/03/16 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
jquery replace方法去空格
2017/05/08 jQuery
vue中添加mp3音频文件的方法
2018/03/02 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
python标准算法实现数组全排列的方法
2015/03/17 Python
Python分析学校四六级过关情况
2017/11/22 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
室内设计专业学生的自我评价分享
2013/11/27 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
财务简历的自我评价
2014/03/05 职场文书
好的促销活动方案
2014/08/21 职场文书
工程技术员岗位职责
2015/04/11 职场文书
中秋节晚会开场白
2015/05/29 职场文书
保护环境的宣传语
2015/07/13 职场文书
学校团代会开幕词
2016/03/04 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
关于JavaScript轮播图的实现
2021/11/20 Javascript
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL