我們在使用任何下載器或者瀏覽器下載東西時，都會出現一個內容進度條，在網頁中也可以實現，這個叫做html的狀態交互元素，下面小漁就來帶領大家來完成一個簡單的進度條的製作。
方法/步驟
首先，我們製作的這個進度條並沒有後臺數據作為支撐，所以是一個靠js實現的一個簡單的頁面。
我們首先需要新建一個html5的頁面，其使用的progress元素實在html5時代才出現的。
我們在新建的頁面中，輸入一個段落標籤，一個進度條，一個button按鈕。
然後，我們需要設置一下進度條顯示的進度。value代表從多少開始，max代表到多少結束。我們做的是百分比形式的，應該寫成這樣的。
這些做好之後，我們需要書寫兩個小的事件，實現原理大體上是鼠標單擊下載按鈕，開始下載變為正在下載百分之多少，等到達到我們預設的時間後顯示下載完成。
我們之前已經給p標籤和progress標籤分別賦予了不同的id，我們需要獲取到這兩個元素，並將他們賦給兩個變量。
我們還要將progress的初始值設為0,當鼠標單擊的時候，我們以一定的時間為週期調用寫好的事件。
函數寫好之後，我們在瀏覽器中調試，點擊下載按鈕之後會在300ms內完成下載時間。
注意事項
小漁原創首發，喜歡的話請默默分享。