寫在前面
原始碼已經放到github上：進度條原始碼
一如既往的看效果：
好吧，效果還是一如既往的醜，簡單的說一下怎麼實現這樣的效果，還是和之前一樣我們分析一下難點在哪？
第一：進度條是生成的，那麼就意味著div的寬度是不定的。
第二：百分比是動態的，就意味著是計算出來的。
第三：每次的改變，百分比都要自己計算出來，說明公式裡面的資料是變數。
只要解決這三個問題，這個進度條就解決了，至於顏色怎麼改變這些就不是什麼難點了。
首先怎麼是div的寬度不固定呢？其實也不難，只要我們根據使用者輸入的長度來改變寬度就可了，拿到使用者輸入的資料，將資料的值賦予樣式的款就行了！
var user_number = $("#user_number").val();
context.style.width = user_number+"px";
if(count !== number(user_number))else看原始碼：
不要忘記引入jquery
謝謝閱讀
JS控制進度條
js控制進度條用到的元素比較簡單，就乙個div標籤內嵌乙個span標籤即可，外面那層div做背景，內部那層span做動態進度顯示，由js控制。整體 如下 為了方便顯示，我就直接在html文件裡把css文字和js指令碼寫了出來，這是原生js控制進度條方式，另外也可以使用node.js或mootools...
實現乙個彩色進度條
顯示序列 033 0m 關閉轉義序列 033 1m 粗體或高亮 033 5m 閃爍 前景顏色序列 033 30m 黑 033 31m 紅 033 32m 綠 033 33m 黃 033 34m 藍 033 35m 洋紅 033 36m 青 033 37m 白 背景顏色序列 與前景顏色對對應，前景色是...
js實現進度條
不多說，直接上 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title progressbar title 6 style 7 11 progress 16 bar 2223 style 2425 head 26 body ...