HTML 進度條

王林原創: 2024-09-04 16:47:37886瀏覽

W3C 標準規定進度條使用進度元素完成特定任務。開發者使用進度標籤在網頁上顯示進度條並表示檔案上傳進度。 HTML 包含此標籤，為 Web 開發人員提供了顯示列的簡單方法。這個標籤與完全不同。標籤，代表磁碟空間使用情況。並且它在 HTML5 中得到支持，HTML5 的不斷發展有助於引入一個有趣的工具。

文法：

這個進度元素有開始和結束標籤，下面顯示了標籤的基本語法。它意味著任何進程的狀態。進度條內嵌顯示方式。

<Progress bar>
……
</Progress bar>

屬性

屬性提供了一個資訊元素，就像 HTML 中瀏覽器的行為一樣。 HTML 中有三個屬性：事件屬性和全域屬性。除了這些屬性之外，progress 元素還有兩個新屬性：

max – 預設值為 1.0，表示完成任務所需的工作總數。

值 – 這指定需要完成多少工作。預設值指定為小於 1.0。在沒有 Val 屬性的情況下，進度條是不確定的。

進度條的範例包括附加文件、首次載入文件或載入網頁。

在 HTML 中建立進度條的方法

進度條有兩種不同的狀態：確定和不確定。對於不確定進度條的情況，您可以為 value 屬性指派一個 null 值，這樣可以更輕鬆地設定樣式。另一方面，對於確定狀態，您定義兩個新屬性 max 和 value，如下面的範例所示。它使用一些類似運動的外觀來用水平條指示任務。如果各自的工作不依賴任務，則標籤已分配。關於瀏覽器相容性，它支援除Internet Explorer（部分支援）之外的所有瀏覽器。根據瀏覽器相容性，進度條可能看起來有所不同。本文將重點放在帶有 max 和 Val 屬性的 bar 的確定狀態。

範例：現在，讓我們來看看帶有 min 和 val 屬性的進度條的基本實作。

<!DOCTYPE html>
<html>
<body>
Downloading on process:
<progress value="19" max="90">
</progress>
<p><strong>Note:</strong> The progress tag is used to represent a progress bar for quite period of time. </p>
</body>
</html>

輸出：

HTML 進度條

1.使用CSS

接下來，我們將了解如何讓時尚的進度條在所有平台上看起來一致。為了標記進度條，我們使用值選擇器並調整尺寸（例如進度元素的寬度和高度），以建立視覺上吸引人的進度條。然而，處理不同的瀏覽器可能會使這個過程變得複雜。瀏覽器對任務完成的口徑做了一些調整。我們透過應用立體效果使 html 欄看起來更坦率。

範例：

<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar </h1>
<style>
progress{width:400px;height:40px}
</style>
</head>
<body>
<progress value="60" max="100"></progress>
</body>
</html>

輸出：

HTML 進度條

2.使用盒子陰影和顏色

使用樣式表，我們可以透過指定背景顏色、分配高度等來為該元素新增樣式規則。可以透過應用 rgba() 函數來應用顏色。進度條元素可以用不同的顏色來完成，以便更好地顯示結果。這是透過屬性‘class’來映射的。一般來說，進度條會從左向右移動來指示任務，從最初的「0」開始，到達目標後顯示結果。

範例：

<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar demo </h1>
<style>
progress{width:200px;height:20px;background-color:pink;
border-radius: 4px;position: absolute;
right: 0px;
top: 80px;
box-shadow: 0 3px 6px rgba(255, 255, 0, 255) inset;}
</style>
</head>
<body>
<progress value="40" max="100"></progress>
</body>
</html>

輸出：

HTML 進度條

注意：不同的瀏覽器處理列的方式有些不同。 Chrome 透過取代原生樣式來使用 Webkit 樣式表。

範例：

進度條 :: – WebKit-Progress-bar

甚至可以使用 class 屬性將進度條大小改為小、中、大。

3.使用跨度

下面的程式碼是不確定的，顯示某些進程正在持續一段時間。

範例：

<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar </h1>
<style>
progress{width:120px;height:20px}
</style>
</head>
<body>
<progress max="100">
<span>20</span>%
</progress>
</body>
</html>

輸出：

HTML 進度條

4.使用 JavaScript 範例

以下規則必須使用 javascript 完成。建立

如果需要的話，建立一個元素，然後建立一個樣式表，最後將它們嵌入在一起。下面的程式碼顯示了 JavaScript 的基本進度條。

範例#1

<!DOCTYPE>
<html>
<body>
<script>
var pgx=2;
function bar(){
var prog = document.getElementById ('progress demo');
setInterval (function ()
{
if(pgx<90){
pgx++;
prog.value =pgx;
}
bar();
}, 100);
}
</script>
<progress id="progress demo" min="2" max="100"></progress>
<br/><br/>
<button onclick="bar()"> submit</button>
</body>
</html>

輸出：

HTML 進度條

範例 #2

<!DOCTYPE html>
<html lang="en">
<head>
<title>implementation of HTML progress Tag</title>
</head>
<body>
<h2> <i>Task in scheduled Progress </i></h2>
<p>Process: <progress id="bar" value="1" max="100"><span>0</span>%</progress></p>
<script type="text/javascript">
var k = 0;
var progb = document.getElementById("bar");
function count(){
if(k < 100){
k = k + 1;
progb.value = k;
progb.getElementsByTagName("span")[0].textContent = k;
}
setTimeout("count()", 400);
}
count();
</script>
</body>
</html>

Output:

HTML 進度條

NOTE: Even you can add some animation effects to the progress bar. To do so, we have to assign some interval timings by assigning some value to it and directing incrementing infinitely, to make the situation control conditional statement used.

Conclusion

Therefore, this article explains how to create a highly flexible and lightweight HTML progress bar. Finally, we have briefly seen the concept as the activity indicator. This element indicates how to load a page or make some registration process and probably represents a percentage of 100 for the max value. When the length of the time task is unknown, developers usually use this mode in the installation or loading page scenario. And that’s even an implementation using Html5 with some cool effects.

以上是HTML 進度條的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html5 css chrome less html webkit NULL define if for include using class Length finally Conditional Attribute Event number function default this display background animation embedding

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML 表格中的捲軸下一篇：HTML 表格中的捲軸

看更多