1. 程式人生 > 程式設計 >JavaScript程式碼模擬滑鼠自動點選事件示例

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程式碼部分:

在這裡插入圖片描述

到此這篇關於JavaScript程式碼模擬滑鼠自動點選事件示例的文章就介紹到這了,更多相關JavaScript模擬滑鼠自動點選事件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!