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里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
动态加载js文件简单示例
Apr 21 Javascript
Javascript之String对象详解
Jun 08 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
深入理解javascript prototype的相关知识
Sep 19 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 Undefined index的问题
2009/06/01 PHP
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
php探针不显示内存解决方法
2019/09/17 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
firebug的一个有趣现象介绍
2011/11/30 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
python通过yield实现数组全排列的方法
2015/03/18 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
python sort、sort_index方法代码实例
2019/03/28 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
python多维数组分位数的求取方式
2020/03/03 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
个人委托书范本
2014/04/02 职场文书
大学生社会实践评语
2014/04/25 职场文书
实习单位鉴定评语
2014/04/26 职场文书
2014年招商工作总结
2014/11/22 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
矛盾论读书笔记
2015/06/29 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang