自製的簡單進度條

年前公司上h5活動，有個進度條功能，設計稿是這樣的：

這裡只分享思路和功能，也記錄一下

html部分

1

<
div 
class
="pro"
id="pro"
>
2<
div 
class
="pro_red"
id="pro_red"
>
div>
3div
>
4<
div 
class
="cishu"
>
5<
span 
class
="ci1"
>0次
span
>
6<
span 
class
="ci2"
>10次
span
>
7<
span 
class
="ci3"
>20次
span
>
8<
span 
class
="ci4"
>30次
span
>
9<
span 
class
="ci5"
>40次
span
>
10<
span 
class
="ci6"
>50次
span
>
11div
>

1

/*灰色底部 */2
.pro 
1011
/*紅色進度條 
*/12
.pro_red 
2526
/*小滑塊 
*/27
.pro_red::after
38.cishu
44.title
48.ci2
54.ci2::after,.ci3::after,.ci4::after,.ci5::after,.ci6::after
65.ci3
69.ci4
73.ci5
77.ci6

1 window.onload = function

() 6
7 getpernum(60) //
寬度8 }

這裡就可以通過後台返回的百分比，來控制進度條的長度顯示。

效果圖如下：

實際專案是用vue框架做的，樣式改一下就可以了。

簡單的進度條

回車與換行 回車 r本義是游標重新回到本行開頭，r的英文是retrun 換行 n本義是游標往下一行 不一定到下一行行首 n的英文是newline。在windows下，換行就是另起一行，回車就是回到一行的開頭，所以我們在平時編寫檔案時的回車符確切說是回車換行符 enter鍵 即實現換行需要 r n 而...

進度條的簡單實現

首先重申一下幾個概念 1 回車與換行 回車與換行是不同的概念，但很多人都不太清楚二者之間有何區別。回車是回到當前行的行首，而不會換到下一行，如果接著輸入的話，之前的內容會被沖掉，從頭開始寫入，表示為 r。換行顧名思義是換到換到下一行，但不會回到行首。一般enter鍵代表了回車和換行。2 進度條的原理...

簡單進度條的實現

首先讓我們先來看進度條實現的 include include include int main printf n return 0 其中用了乙個函式usleep，在gcc編譯器中，它包含在標頭檔案unistd.h中，其單位為微秒，sleep單位為毫秒，sleep單位為秒。r 表示回車，表示輸出一行後...