html5中progress標(biāo)簽的使用方法

發(fā)布時間：2020-09-26 09:59:34 來源：億速云閱讀：330 作者：小新欄目：web開發(fā)

這篇文章主要介紹了html5中progress標(biāo)簽的使用方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

首先我們先介紹html5 progress標(biāo)簽的用法：

<progress>標(biāo)簽定義運行中的進度（進程）。

可以使用<progress>標(biāo)簽來顯示javascript中耗費時間的函數(shù)的進度。

<progress>表示任務(wù)的進度，背景為灰色，完成的部分填充為脈動式綠色條（但不同的瀏覽器下，樣式還是不同的）。

提示：請使用 <progress> 標(biāo)簽來顯示下載的進度。

再來讓我們看一個html5 progress標(biāo)簽的使用實例：

標(biāo)記“下載進度”：

對象的下載進度：
<progress value='70' max='100'></progress>

效果如圖：

html5中progress標(biāo)簽的使用方法

圖很明顯，就不多說了。

現(xiàn)在來說說html5 progress標(biāo)簽的屬性介紹：

1.可以通過value屬性來設(shè)置百分比（0~1的小數(shù)）

通常我們還可以在元素內(nèi)部再放置進度值，這樣當(dāng)瀏覽器不(www.php.cn)支持的時候就可以顯示出文字作為后備方案。

<progress value="0.25">25%</progress>

2，可以利用max屬性設(shè)置最大值，這時value的范圍便是0~最大值

<progress value="25" max="100">25%</progress>

3，value屬性表示進度條完成的進度之，value值的范圍為0~max之間。如果沒有設(shè)置max屬性，那么value屬性值的范圍要在0~1之間。

如果沒有value值，那么完成進度是不確定的。這時候表示任務(wù)正在進行中，但不知道多長時間可以完成。這時候的progress在webkit瀏覽器中我們可以用作loading來使用，表示正在頁面加載中，或者ajax請求后臺數(shù)據(jù)中。

不設(shè)置value值的話，則表示不確定的進度條（進度會不斷循環(huán)的滑動）

<progress></progress>

這個動態(tài)圖放不出來，大家可以自己動手看看，這樣的樣式還挺有趣的。

每日小結(jié)之html5 progress標(biāo)簽：

progress標(biāo)簽：從名字上來看，估計大家也能猜到這個標(biāo)簽是什么標(biāo)簽了，沒錯，他是一個進度條。在HTML5中我們終于可以不用模擬了。

<progress id="億速云" max="100"></progress>

progress屬性：value：表示當(dāng)前進度max：表示總進度注：value和max屬性的值必須大于0，value的值小于或等于max屬性的值。案例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>億速云之progress標(biāo)簽的應(yīng)用</title>
</head>
<body>
<h2>億速云之progress標(biāo)簽的應(yīng)用</h2>
<p>完成百分比：<progress max="100"></progress></p>
</body>
</html>

感謝你能夠認真閱讀完這篇文章，希望小編分享html5中progress標(biāo)簽的使用方法內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學(xué)習(xí)!

向AI問一下細節(jié)

html5中progress標(biāo)簽的使用方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽