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之十四 (触发事件核心方法)
Aug 23 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
JavaScript运行机制实例分析
Apr 11 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实现获取文件mime类型的方法
2015/02/11 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
Python解析xml中dom元素的方法
2015/03/12 Python
python人民币小写转大写辅助工具
2018/06/20 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
阳光体育活动总结
2014/04/30 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
Python面试不修改数组找出重复的数字
2022/05/20 Python