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 相关文章推荐
HTML颜色选择器实现代码
Nov 23 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
简单的渐变轮播插件
Jan 12 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
编写React组件项目实践分析
Mar 04 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
axios如何取消重复无用的请求详解
Dec 15 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 - Html Transfer Code
2006/10/09 PHP
我常用的几个类
2006/10/09 PHP
用文本作数据处理
2006/10/09 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
Javascript倒计时代码
2010/08/12 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
JS中Location使用详解
2015/05/12 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
vue接口请求加密实例
2020/08/11 Javascript
js实现抽奖功能
2020/11/24 Javascript
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
日期和时间问题
2015/01/04 面试题
室内设计专业个人的自我评价
2013/10/19 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
工程材料采购方案
2014/05/18 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
教代会闭幕词
2015/01/28 职场文书
教师培训学习心得体会
2016/01/21 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书