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中combobox多选的不兼容问题总结
Dec 24 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 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 xml实例 留言本
2009/03/20 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
php 可变函数使用小结
2018/06/12 PHP
js的表单操作 简单计算器
2011/12/29 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
Python基于PycURL实现POST的方法
2015/07/25 Python
flask入门之表单的实现
2018/07/18 Python
python 字典访问的三种方法小结
2019/12/05 Python
在python shell中运行python文件的实现
2019/12/21 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
专题组织生活会方案
2014/06/15 职场文书
作风年建设汇报材料
2014/08/14 职场文书
2014年租房协议书范本
2014/10/30 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
爱护公物主题班会
2015/08/17 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
python unittest单元测试的步骤分析
2021/08/02 Python