数据结构
网络
关系型数据库管理系统
操作系统
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+ 阅读量
