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
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
使用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中使用Oracle数据库(1)
2006/10/09 PHP
如何在PHP程序中防止盗链
2008/04/09 PHP
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
浅谈php扩展imagick
2014/06/02 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
Linux中为php配置伪静态
2014/12/17 PHP
js闭包实例汇总
2014/11/09 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
Ionic快速安装教程
2016/06/03 Javascript
js简单时间比较的方法
2016/08/02 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
复习Python中的字符串知识点
2015/04/14 Python
Python selenium文件上传方法汇总
2020/11/19 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Django内容增加富文本功能的实例
2017/10/17 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
python实现接口并发测试脚本
2019/06/25 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
python Selenium 库的使用技巧
2020/10/16 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
办公室主任职责范本
2014/03/07 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
法人身份证明书
2014/10/08 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python