JavaScript代碼模擬鼠標(biāo)自動點(diǎn)擊事件示例
利用JavaScript代碼可以幫助我們實現(xiàn)鼠標(biāo)的自動點(diǎn)擊事件。比如點(diǎn)擊了按鈕1以后,JavaScript代碼會自動去點(diǎn)擊下一個按鈕,一直點(diǎn)擊到按鈕5才會停止(可根據(jù)實際情況進(jìn)行相應(yīng)的調(diào)整)。
效果圖如下所示:
按鈕1被點(diǎn)擊以后,通過JavaScript的代碼自動點(diǎn)擊按鈕2,代碼點(diǎn)擊了按鈕2之后又會去點(diǎn)擊按鈕3,以此類推,直到點(diǎn)擊到按鈕5為止。
首先先設(shè)置幾個按鈕,然后再設(shè)置一個盒子包裹著一些文字,方便我們在接下來js部分中更換里面的內(nèi)容時,更加直觀的看到它的效果。
HTML代碼部分:
通過css給這些按鈕設(shè)置寬度、高度以及邊框的樣式以及在頁面的正中間的上方顯示,然后再利用關(guān)鍵幀(@keyframes,考慮到瀏覽器兼容性的問題,可在關(guān)鍵幀前面加上不同的前綴)給這些文字設(shè)置大小、加粗的效果,以及添加顏色的變化,讓文字有一個從消失到隱藏再到消失的一個過程。
CSS部分代碼:
js部分的代碼可寫在HTML頁面中,也可以自行創(chuàng)建一個js的文件,創(chuàng)建好之后就可以開始寫頁面加載事件,并且通過ID獲取到前面HTML中的樣式,再然后就是給按鈕1添加點(diǎn)擊事件,再在點(diǎn)擊事件里面嵌套點(diǎn)擊事件,注意:為了避免點(diǎn)擊事件過快點(diǎn)擊,可以利用定時器setTimeout設(shè)置點(diǎn)擊事件在多長時間后才會去被觸發(fā),然后還可以通過設(shè)置變量之后再給定時器賦值(e=setTimeout…)方便后面清除定時器也防止點(diǎn)擊事件過快而出現(xiàn)BUG。最后就是通過innerHtml來更換HTML中的文字,可以更加直觀的看到按鈕切換的效果。
JavaScript代碼部分:
到此這篇關(guān)于JavaScript代碼模擬鼠標(biāo)自動點(diǎn)擊事件示例的文章就介紹到這了,更多相關(guān)JavaScript模擬鼠標(biāo)自動點(diǎn)擊事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript中使用new與不使用實例化對象的區(qū)別
這篇文章主要介紹了javascript中使用new與不使用實例化對象的區(qū)別的相關(guān)資料,需要的朋友可以參考下2015-06-06微信小程序?qū)崿F(xiàn)slideUp、slideDown滑動效果及點(diǎn)擊空白隱藏功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)slideUp、slideDown滑動效果及點(diǎn)擊空白隱藏功能,涉及微信小程序事件響應(yīng)、頁面元素屬性動態(tài)操作實現(xiàn)滑動與蒙層功能相關(guān)技巧與注意事項,需要的朋友可以參考下2018-12-12javascript實現(xiàn)博客園頁面右下角返回頂部按鈕
這篇文章主要介紹了使用javascript實現(xiàn)博客園頁面右下角返回頂部按鈕的思路及源碼,非常不錯,這里推薦給小伙伴們2015-02-02