當我每每在後臺更新網站的時候總是顯示更新的進度的進度條，當時我就特別想做一做進度條，看看是什麼原理，由於當時很忙，也沒有做。現在有時間了，今天查了查資料終於把進度條弄出來了，順便以經驗的形式寫出來了，希望對大家有所幫助。
工具/原料
sublime_text網頁編輯器
方法/步驟
首先先說一下DIV程式碼，這個地方有一個需要注意的地方，就是進度條初始化的寬度是0，這個樣式必須寫在標籤內部，也就是內嵌形式 style="width:0%"或者 style="width:0px",寫在ID樣式中是無效的，因為ID樣式會被呼叫，是動態變化的。DIV程式碼如下所示：
帶著上述疑問我決定新建一個class樣式，畢竟這也是程式設計人員想到的方法，當我新建之後，引用這個樣式的時候，發現也是無效。
新建樣式後，開啟瀏覽器，發現無法顯示進度條進度，如下圖所示。所以我們要採用內嵌形式形式的CSS呼叫，確保能夠被優先載入。
弄好DIV後，我們看一下CSS樣式，進度條的進度顏色我用的是綠顏色，因為我在更新網站的時候總是見到綠色，綠色對我很有親切感。CSS程式碼如下所示
弄好DIV+CSS後，接下來我們來看JS，首先構造一個函式，這個函式的功能是動態的顯示進度條的進度，以1%的速度遞增。當進度條達到100%的時候停止遞增，清除遞增功能，紅框框住的是清除遞增的功能。程式碼如下所示：
function haha(){
var jindutiao = document.getElementById("progress");
jindutiao.style.width = parseInt(jindutiao.style.width) + 1 + "%";
jindutiao.innerHTML = jindutiao.style.width;
if(jindutiao.style.width == "100%"){
window.clearInterval(shijian);
}
}
接下來是定時功能，每0.1S執行一次進度功能，換句話說也就是10S中更新完畢，達到100%，當頁面載入的時候開始執行。程式碼如下所示：
var shijian = window.setInterval(function(){haha();},100);
window.onload = function(){
shijian;
}
接下來我們用瀏覽器開啟文件，我們會看到進度條隨著時間的延長而不斷增加進度，也就是綠色部分不斷增加，下圖是增加到43%時的效果。
下面我們看到的是進度達到82%時的效果。
最後我們來看一下進度達到100%的效果，如果程式沒有錯誤，進度達到100%就會停止，如圖所示，進度達到了100%後並沒有增加，表明程式沒有錯誤。
注意事項
共同分享，共同進步。