JavaScript代碼模擬鼠標(biāo)自動(dòng)點(diǎn)擊事件示例
利用JavaScript代碼可以幫助我們實(shí)現(xiàn)鼠標(biāo)的自動(dòng)點(diǎn)擊事件。比如點(diǎn)擊了按鈕1以后,JavaScript代碼會(huì)自動(dòng)去點(diǎn)擊下一個(gè)按鈕,一直點(diǎn)擊到按鈕5才會(huì)停止(可根據(jù)實(shí)際情況進(jìn)行相應(yīng)的調(diào)整)。
效果圖如下所示:

按鈕1被點(diǎn)擊以后,通過(guò)JavaScript的代碼自動(dòng)點(diǎn)擊按鈕2,代碼點(diǎn)擊了按鈕2之后又會(huì)去點(diǎn)擊按鈕3,以此類(lèi)推,直到點(diǎn)擊到按鈕5為止。

首先先設(shè)置幾個(gè)按鈕,然后再設(shè)置一個(gè)盒子包裹著一些文字,方便我們?cè)诮酉聛?lái)js部分中更換里面的內(nèi)容時(shí),更加直觀的看到它的效果。
HTML代碼部分:

通過(guò)css給這些按鈕設(shè)置寬度、高度以及邊框的樣式以及在頁(yè)面的正中間的上方顯示,然后再利用關(guān)鍵幀(@keyframes,考慮到瀏覽器兼容性的問(wèn)題,可在關(guān)鍵幀前面加上不同的前綴)給這些文字設(shè)置大小、加粗的效果,以及添加顏色的變化,讓文字有一個(gè)從消失到隱藏再到消失的一個(gè)過(guò)程。
CSS部分代碼:

js部分的代碼可寫(xiě)在HTML頁(yè)面中,也可以自行創(chuàng)建一個(gè)js的文件,創(chuàng)建好之后就可以開(kāi)始寫(xiě)頁(yè)面加載事件,并且通過(guò)ID獲取到前面HTML中的樣式,再然后就是給按鈕1添加點(diǎn)擊事件,再在點(diǎn)擊事件里面嵌套點(diǎn)擊事件,注意:為了避免點(diǎn)擊事件過(guò)快點(diǎn)擊,可以利用定時(shí)器setTimeout設(shè)置點(diǎn)擊事件在多長(zhǎng)時(shí)間后才會(huì)去被觸發(fā),然后還可以通過(guò)設(shè)置變量之后再給定時(shí)器賦值(e=setTimeout…)方便后面清除定時(shí)器也防止點(diǎn)擊事件過(guò)快而出現(xiàn)BUG。最后就是通過(guò)innerHtml來(lái)更換HTML中的文字,可以更加直觀的看到按鈕切換的效果。
JavaScript代碼部分:

到此這篇關(guān)于JavaScript代碼模擬鼠標(biāo)自動(dòng)點(diǎn)擊事件示例的文章就介紹到這了,更多相關(guān)JavaScript模擬鼠標(biāo)自動(dòng)點(diǎn)擊事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript獲取圖片真實(shí)大小代碼實(shí)例
這篇文章主要介紹了JavaScript獲取圖片真實(shí)大小代碼實(shí)例,本文使用onload事件來(lái)獲取圖片的真實(shí)大小,需要的朋友可以參考下2014-09-09
JavaScript實(shí)現(xiàn)Java中StringBuffer的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)Java中StringBuffer的方法,實(shí)例分析了StringBuffer類(lèi)的實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2015-02-02
javascript中打印當(dāng)前的時(shí)間實(shí)現(xiàn)思路及代碼
打印當(dāng)前的時(shí)間的方法有很多,在本文為大家詳細(xì)介紹下使用javascript是如何做到的,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下2013-12-12
JavaScript閉包原理與用法學(xué)習(xí)筆記
這篇文章主要介紹了JavaScript閉包原理與用法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript閉包相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
JS實(shí)現(xiàn)隨機(jī)生成10個(gè)手機(jī)號(hào)的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)隨機(jī)生成10個(gè)手機(jī)號(hào)的方法,涉及javascript數(shù)值運(yùn)算與隨機(jī)數(shù)操作相關(guān)使用技巧,需要的朋友可以參考下2018-12-12
前端實(shí)現(xiàn)json動(dòng)畫(huà)詳細(xì)過(guò)程(附帶示例)
這篇文章主要介紹了如何使用Lottie制作動(dòng)畫(huà),包括創(chuàng)建動(dòng)畫(huà)文件.json、實(shí)現(xiàn)效果、在Git倉(cāng)庫(kù)中保存和共享、運(yùn)行動(dòng)畫(huà)以及在動(dòng)畫(huà)天堂下載和顯示JSON動(dòng)畫(huà),文中通過(guò)代碼及圖文介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
js使用Promise實(shí)現(xiàn)簡(jiǎn)單的Ajax緩存
這篇文章主要介紹了js使用Promise實(shí)現(xiàn)簡(jiǎn)單的Ajax緩存,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11

