資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 JavaScript 建立進度條
JavaScript 是一種強大的語言，允許 Web 開發人員建立動態和互動式的網頁。它可以用於向網站新增各種功能，例如表單驗證、動畫等等。JavaScript 可以用於建立進度條，這是其最有用的功能之一。
在本教程中，我們將引導您完成使用 JavaScript 建立進度條的過程。進度條是任務進度的圖形化表示，可用於向用戶反饋任務完成所需的時間。我們將使用 JavaScript 在任務進行時更新進度條，從而向用戶直觀地顯示任務的完成進度。
在本教程的下一部分，我們將為您提供使用 JavaScript 建立進度條的程式碼。我們將逐步解釋程式碼的工作原理，以便您瞭解如何自己建立進度條。在本教程結束時，您將掌握使用 JavaScript 建立進度條的知識和技能，並且能夠將此功能新增到您自己的網站中。因此，讓我們開始吧！
使用 JavaScript 建立進度條
要建立進度條，我們將首先使用 HTML 和 CSS 定義進度條和進度條填充的樣式。然後，使用 JavaScript，我們將根據使用者輸入調整進度條填充的寬度來更新進度條的新進度值。
接下來，我們將在網頁上的按鈕上新增一個事件偵聽器，該偵聽器將定期觸發進度條更新，直到它達到 100%。我們很高興將這些技術結合起來，建立一個視覺上吸引人、功能強大且響應迅速的進度條，從而增強使用者體驗。
讓我們從將過程劃分為三個子部分開始建立進度條：HTML、CSS 和 JavaScript。首先，我們將從 HTML 部分開始。
HTML
在 HTML 部分，我們開始透過定義基本結構來構建進度條。這包括建立進度條的容器和一個用於更新它的按鈕。透過設定正確的 HTML 元素和類，我們為進度條的樣式和功能奠定了基礎。
<h3>Progress Bar Using JavaScript</h3> <!-- The button to update the progress bar --> <button id="update-button">Update Progress</button> <!-- The progress bar element --> <div id="progress-bar"></div>
在 HTML 部分，我們建立了進度條和一個用於更新它的按鈕。按鈕的 ID 為“update-button”，進度條的 ID 為“progress-bar”。在 JS 部分，我們將使用這些 ID 來引用按鈕和進度條元素。當單擊按鈕時，進度條將開始填充。
現在，讓我們繼續定義進度條的 CSS。
CSS
在 CSS 部分，我們定義了進度條和進度條填充的樣式。我們將使用 background-color、border-radius 和 width 等 CSS 屬性來定義進度條的樣式。我們還將在偽元素之前使用“：”來建立進度條填充，它將由我們的 JavaScript 程式碼更新。
#progress-bar {
width: 100%;
height: 15px;
background-color: #f1f1f1;
border-radius: 20px;
}
#progress-bar-fill {
height: 100%;
background-color: #ff0000;
border-radius: 20px;
}
上面的 CSS 程式碼定義了進度條的樣式。第一個 CSS 規則設定了進度條元素本身的寬度、高度、背景顏色和邊框半徑。第二個 CSS 規則設定了進度條填充元素的高度、背景顏色和邊框半徑，它是進度條更新時實際填充的部分。
接下來，我們將繼續進行 JavaScript 部分以定義進度條邏輯。
JavaScript
JavaScript 部分是我們賦予進度條功能的地方。在這裡，我們建立一個函式，它接收一個新的進度值並相應地更新進度條。此外，我們向按鈕元素添加了一個事件偵聽器，以便在單擊它時呼叫該函式並更新進度條。
下面是進度條功能程式碼示例。
// Get the progress bar element and the update button
const progressBar = document.getElementById("progress-bar");
const updateButton = document.getElementById("update-button");
// Update the progress bar with a new progress value
function updateProgressBar(progress) {
// Create a new element to represent the progress bar fill
progressBar.innerHTML = "";
// Get the progress bar fill element from the HTML
const progressBarFill = document.getElementById("progress-bar-fill");
// Set the width of the progress bar fill based on the progress value
progressBarFill.style.width = `${progress}%`;
}
// Update the progress bar when the button is clicked
updateButton.addEventListener("click", function () {
let progress = 0; // Set the initial progress value to 0
// Update the progress bar every 10 milliseconds until it reaches 100%
const intervalId = setInterval(function () {
progress += 1; // Increment the progress value
updateProgressBar(progress); // Update the progress bar with the new progress value
// Stop the interval when the progress reaches 100%
if (progress === 100) {
clearInterval(intervalId);
}
}, 100);
});
在上面的程式碼中，我們定義了當單擊按鈕時如何更新進度條。程式碼的第一部分從 HTML 中獲取進度條和按鈕元素，這些元素是在前面定義的。updateProgressBar 函式建立一個新元素來表示進度條填充，並根據傳入的進度值設定其寬度。
程式碼的第二部分向按鈕添加了一個事件偵聽器，當單擊該按鈕時觸發進度條更新。它將初始進度值設定為 0，然後設定一個間隔，每 10 毫秒更新一次進度條，直到它達到 100%。每次更新時，它都會將進度值增加 1，並使用新的進度值呼叫 updateProgressBar 函式來更新進度條。當進度達到 100% 時，它會停止間隔，這樣進度條就不會持續更新超過 100%。
完整示例
使用 JavaScript 建立進度條的完整示例如下所示
<!DOCTYPE html>
<html>
<head>
<title>Progress Bar Using JavaScript</title>
</head>
<style>
/* Styling for the progress bar */
#progress-bar {
width: 100%;
/* Full width */
height: 15px;
/* Fixed height */
background-color: #f1f1f1;
/* Light gray background */
border-radius: 20px;
}
/* Styling for the progress bar fill */
#progress-bar-fill {
height: 100%;
/* Full height */
background-color: #ff0000;
/* Green fill color */
border-radius: 20px;
}
</style>
<body>
<h3>Progress Bar Using JavaScript</h3>
<!-- The button to update the progress bar -->
<button id="update-button">Update Progress</button>
<br> <br>
<!-- The progress bar element -->
<div id="progress-bar"></div>
<script>
// Get the progress bar element and the update button
const progressBar = document.getElementById("progress-bar");
const updateButton = document.getElementById("update-button");
// Update the progress bar with a new progress value
function updateProgressBar(progress) {
// Create a new element to represent the progress bar fill
progressBar.innerHTML = "<div id='progress-bar-fill'></div>";
// Get the progress bar fill element from the HTML
const progressBarFill = document.getElementById("progress-bar-fill");
// Set the width of the progress bar fill based on the progress value
progressBarFill.style.width = `${progress}%`;
}
// Update the progress bar when the button is clicked
updateButton.addEventListener("click", function () {
let progress = 0; // Set the initial progress value to 0
// Update the progress bar every 10 milliseconds until it reaches 100%
const intervalId = setInterval(function () {
progress += 1; // Increment the progress value
updateProgressBar(progress); // Update the progress bar with the new progress value
// Stop the interval when the progress reaches 100%
if (progress === 100) {
clearInterval(intervalId);
}
}, 100);
});
</script>
</body>
</html>
如果您在 Web 瀏覽器中執行程式碼，則會顯示一個進度條和一個標記為“更新進度條”的按鈕。當您單擊按鈕時，進度條將從 0% 開始，逐漸移動到 100%。進度條將即時更新，顯示單擊按鈕時已完成的進度百分比。
結論
在本教程中，我們學習瞭如何使用 HTML、CSS 和 JavaScript 建立進度條。我們在 HTML 部分定義了進度條和按鈕的結構，使用 CSS 樣式化了進度條，並使用 JavaScript 定義了進度條的功能。
藉助簡單的函式和事件偵聽器，我們能夠在單擊按鈕時將進度條從 0% 更新到 100%。透過遵循這些步驟，您可以輕鬆地為您的 Web 應用程式建立進度條。
4K+ 閱讀量
