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类的封装及实现代码
Dec 02 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
基于canvas实现手写签名(vue)
May 21 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在线生成二维码代码(google api)
2013/06/03 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
XP折叠菜单&仿QQ2006菜单
2006/12/16 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
Python中设置变量访问权限的方法
2015/04/27 Python
python format 格式化输出方法
2018/07/16 Python
将python图片转为二进制文本的实例
2019/01/24 Python
python DataFrame 取差集实例
2019/01/30 Python
pandas 空数据处理方法详解
2019/11/02 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
jupyter notebook 多行输出实例
2020/04/09 Python
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
土木工程专业个人求职信
2013/12/05 职场文书
中学生寄语大全
2014/04/03 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
银行授权委托书范本
2014/10/04 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
怎样写离婚协议书
2015/01/26 职场文书
企业培训简报范文
2015/07/20 职场文书
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers