如何用js實現正在載入的進度條效果

新建一個html文件，定名為test.html，用于實現進度條的結果。

在test.html頁面，利用h1標簽建立“正在載入,請稍候...”題目，并利用寬度為40%的table作為進度條的總寬度。

在table的td元素內，再利用一個table標簽界說進度條的顏色，而且設置一個id屬性，用于下面獲得進度條調整其寬度實現動態的結果。

界說一個js函數load()，實現改變id為lpc的table的寬度，設置每次改變2%，代碼如下：

要使進度條主動轉變，需要利用js中的setTimeout（）按時器，實現每秒鐘反復挪用load（）函數，實現動態累加2%的寬度。

設置累加的寬度不跨越100%，即當pc的值大于100時，斷根按時器，遏制執行load（）函數，進度條遏制。代碼如下：

注：在函數后面利用load()執行函數，啟動進度條。

在瀏覽器運行test.html，查看實現的結果。

可見，當作功實現進度條的結果。

0 條評論