資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用HTML設定進度條的最大值？
網站上的進度條用於表示已完成工作的百分比，例如從任何網站下載歌曲或電影的進度。您可以使用進度條來顯示已下載和剩餘的歌曲或電影數量。
在HTML中，我們可以使用<progress>元素在網站上顯示進度條，以表示已完成和剩餘的工作量。您可以透過使用元素本身定義屬性來自行處理進度條的值。
現在讓我們瞭解可以賦予<progress>元素的不同屬性的用法。可以在progress標籤內定義的屬性列表如下所示並進行了解釋：
value − value屬性表示進度的當前值，即已完成的任務或工作的數量。
max − max屬性用於設定進度條可以達到的最大值。您可以使用任何數字定義進度條可以達到的最大值。
position − position屬性返回進度條的當前位置。
level − 此屬性返回進度條的列表。
語法
下面的語法將向您展示如何在HTML文件中使用上面定義的屬性以及progress元素：
<progress discussed attributes……> </progress>
注意 − 此元素不是自閉合標籤，但這並不意味著您可以在其起始標籤和結束標籤之間傳遞任何型別的數值。如果您嘗試在其內部傳遞任何值，它將忽略該值，並且不會將其顯示在使用者螢幕上。
讓我們瞭解進度條元素的實際實現，並使用程式碼示例為其設定最大值。
示例
下面的示例將幫助您瞭解如何在HTML中為進度條設定最大值：
<!DOCTYPE html>
<html>
<body>
<center>
<h2>Set the maximum value of progress bar using HTML</h2>
<p>The maximum value to the below bar is set using the max attribute and the current process completion value is set using the value attribute.</p>
<p>The below progress bar shows the 50% completion of the process as the max value is set to 100 and the current value is set to 50. </p>
<progress value = "50" max = "100"></progress>
</center>
</body>
</html>
在上面的示例中，我們使用了帶有value和max屬性的progress元素。我們使用max屬性設定進度條可以達到的最大值（在本例中為100），並使用value屬性設定當前值（在本例中為50），這表示過程已完成50%。
讓我們再看一個程式碼示例，以瞭解如何在HTML中為進度條設定最大值。
示例
此示例將說明progress元素的使用以及使用max屬性設定其最大值。
<!DOCTYPE html>
<html>
<body>
<center>
<h2>Set the maximum value of progress bar using HTML</h2>
<p>The maximum value to the below bar is set using the max attribute and the current process completion value is set using the value attribute.</p>
<p>The below progress bar shows the 75% completion of the process as the max value is set to 100 and the current value is set to 75.</p>
<progress value = "75" max = "100"></progress>
</center>
</body>
</html>
在此程式碼示例中，我們將進度條的最大值設定為200，當前值設定為150，這使得進度條顯示正在進行的過程已完成75%。
讓我們再看一個程式碼示例，以深入瞭解使用max屬性為進度條設定最大值的原理。
示例
下面的示例將顯示如果max和value屬性的值相同，進度條將如何顯示過程的進度：
<!DOCTYPE html>
<html>
<body>
<center>
<h2>Setting the maximum value of progress bar using HTML</h2>
<p>The maximum value to the below bar is set using the max attribute and the current process completion value is set using the value attribute.</p>
<p>The below progress bar shows the 100% completion of the process as the max value is set to 100 and the current value is set to 100. </p>
<progress value = "100" max = "100"></progress>
</center>
</body>
</html>
在此示例中，我們使用了具有相同值的max屬性和value屬性，這將使progress元素顯示過程已完全完成，並顯示完整的藍色進度條，因為過程已完成。
結論
在本文中，我們學習瞭如何在HTML中為progress元素設定最大值。我們藉助三個不同的程式碼示例（為max屬性賦予了不同的值，以便在每個程式碼示例中設定不同的最大值）詳細討論並理解了此過程。
瀏覽量：183
