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 相关文章推荐
jquery随意添加移除html的实现代码
Jun 21 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 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中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
php调用c接口无错版介绍
2014/03/11 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
网络方面基础面试题
2012/11/16 面试题
整改报告怎么写
2014/11/06 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers