java⾃动点击按钮事件_JavaScript代码模拟⿏标⾃动点击事件
css鼠标点击样式⽰例
利⽤JavaScript代码可以帮助我们实现⿏标的⾃动点击事件。⽐如点击了按钮1以后,JavaScript代码会⾃动去点击下⼀个按钮,⼀直点击到按钮5才会停⽌(可根据实际情况进⾏相应的调整)。
效果图如下所⽰:
按钮1被点击以后,通过JavaScript的代码⾃动点击按钮2,代码点击了按钮2之后⼜会去点击按钮3,以此类推,直到点击到按钮5为⽌。
⾸先先设置⼏个按钮,然后再设置⼀个盒⼦包裹着⼀些⽂字,⽅便我们在接下来js部分中更换⾥⾯的内容时,更加直观的看到它的效果。
HTML代码部分:
通过css给这些按钮设置宽度、⾼度以及边框的样式以及在页⾯的正中间的上⽅显⽰,然后再利⽤关键帧(@keyframes,考虑到浏览器兼容性的问题,可在关键帧前⾯加上不同的前缀)给这些⽂字设置⼤⼩、加粗的效果,以及添加颜⾊的变化,让⽂字有⼀个从消失到隐藏再到消失的⼀个过程。
CSS部分代码:
js部分的代码可写在HTML页⾯中,也可以⾃⾏创建⼀个js的⽂件,创建好之后就可以开始写页⾯加载事件,并且通过ID获取到前⾯HTML 中的样式,再然后就是给按钮1添加点击事件,再在点击事件⾥⾯嵌套点击事件,注意:为了避免点击事件过快点击,可以利⽤定时器setTimeout设置点击事件在多长时间后才会去被触发,然后还可以通过设置变量之后再给定时器赋值(e=setTimeout…)⽅便后⾯清除定时器也防⽌点击事件过快⽽出现BUG。最后就是通过innerHtml来更换HTML中的⽂字,可以更加直观的看到按钮切换的效果。
JavaScript代码部分:
之家以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持脚本之家!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论