資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 HTML5 中顯示任務完成進度？
如果我們想直觀地展示任何任務或目標的完成情況，可以使用<progress> 元素。要顯示任務完成的進度，可以使用 max 和 value 屬性。以下是 HTML 中<progress>標籤的語法：
<progress value=”20” max=”100”></progress>
進度條具有開始和結束標籤。它是 HTML5 中一個新的語義元素。它也用於顯示檔案上傳進度。
HTML <progress> 標籤支援以下屬性：
屬性 |
值 |
描述 |
|---|---|---|
max |
最大值 |
它應該是一個大於零的有效浮點數。 |
value |
value |
指定已完成任務的多少。它應該是一個介於 0 和 max 之間的浮點數，如果省略 max，則為 0 到 1 之間的浮點數。 |
它也支援全域性和事件屬性。
示例
以下示例演示如何在 HTML 中顯示任務完成進度：
<!DOCTYPE html> <html> <body> <h1>Progress element in HTML</h1> <label for="file">File Copying Progress:</label> <progress id="file" value="45" max="100"> 45% </progress> </body> </html>
現在，讓我們看看如何在 HTML 中設定進度條的樣式：
使用 CSS 設定進度條樣式
現在讓我們使用 CSS 來設定進度條的樣式：
<!DOCTYPE html>
<html>
<head>
<style>
progress[value] {
-webkit-appearance: none;
appearance: none;
width: 250px;
height: 20px;
}
</style>
</head>
<body>
<h1>Progress element in HTML</h1>
<label for="file">File Downloading Progress:</label>
<progress id="file" value="35" max="100"> 35% </progress>
</body>
示例
下面的示例建立了一個帶有兩個按鈕的進度條，透過應用 JavaScript 程式碼來增加和減少進度條。
<!DOCTYPE html>
<html>
<style>
#container {
width: 100%;
background-color: gray;
}
#bar {
width: 0%;
height: 40px;
background-color: red;
}
</style>
<body>
<h1>Progress Bar</h1>
<div id="container">
<div id="bar"></div>
</div>
<br>
<button onclick="Increase()">Increase</button>
<button onclick="Decrease()">Decrease</button>
<!-- dispaying message for user -->
<h2>Increase by 5%</h2>
<h2>Decrease by 5%</h2>
<script>
function Increase() {
var elem = document.getElementById("bar");
var width = elem.style.width;
width = width.replace(/%/g, '');
if (width == "") width = '5';
else width = parseInt(width) + 5;
if (width == 100) {
width = width.toString() + '%';
elem.style.width = width;
} else if (width < 100) {
width = width.toString() + '%';
elem.style.width = width;
}
}
function Decrease() {
var elem = document.getElementById("bar");
var width = elem.style.width;
width = width.replace(/%/g, '');
if (width == "") width = '0';
else width = parseInt(width) - 5;
if (width == 0) {
width = width.toString() + '%';
elem.style.width = width;
} else if (width > 0) {
width = width.toString() + '%';
elem.style.width = width;
}
}
</script>
</body>
</html>
更新於：2023年10月10日
288 次瀏覽
廣告