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 相关文章推荐
setAttribute 与 class冲突解决
Feb 17 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
鸿蒙系统中的 JS 开发框架
Sep 18 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
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
python函数返回多个值的示例方法
2013/12/04 Python
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
更改Ubuntu默认python版本的两种方法python-> Anaconda
2016/12/18 Python
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
快速学习Oracle触发器和游标
2021/06/30 Oracle
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏