JavaScript代码模拟⿏标⾃动点击事件
本次任务完成时间：2018年01⽉18⽇
css鼠标点击样式开发⼯具与关键技术：Adobe Dreamweaver CC 2017&&前端页⾯设计
展⽰效果：html+css3 && JavaScript的应⽤
利⽤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小时内删除。