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 相关文章推荐
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
JScript实现地址选择功能
Aug 15 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
PHP 表单提交给自己
2008/07/24 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
优秀生推荐信范文
2013/11/28 职场文书
财务稽核岗位职责
2015/04/13 职场文书
李强为自己工作观后感
2015/06/11 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
AI:如何训练机器学习的模型
2021/04/16 Python
python自动化之如何利用allure生成测试报告
2021/05/02 Python