原生js怎么制作进度条

原生JS制作进度条的方法有很多种，核心步骤包括：创建HTML结构、设置CSS样式、使用JavaScript实现进度条的动态变化。其中，使用JavaScript控制进度条的动态变化是最为关键的一步，因为它涉及到DOM操作和事件监听。下面将详细描述如何通过这三个步骤来实现一个简单的进度条，并进一步探讨如何优化和扩展这个进度条的功能。

一、创建HTML结构

为了实现一个进度条，首先我们需要一个简单的HTML结构来表示进度条的容器和进度条本身。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Bar</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
    </div>
    <button id="startButton">Start Progress</button>
    <script src="script.js"></script>
</body>
</html>

在这个HTML结构中，.progress-container是进度条的外层容器，.progress-bar是实际的进度条。我们还添加了一个按钮，用于启动进度条的动画。

二、设置CSS样式

接下来，我们需要通过CSS来设置进度条的样式。这个样式包括容器的大小、进度条的颜色等。

/* style.css */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}
.progress-container {
    width: 80%;
    height: 30px;
    background-color: #e0e0e0;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
}
.progress-bar {
    height: 100%;
    width: 0;
    background-color: #76c7c0;
    transition: width 0.25s;
}
button {
    padding: 10px 20px;
    font-size: 16px;
}

在这个CSS中，我们设置了.progress-container的宽度和高度，并给它添加了一个背景颜色和圆角。.progress-bar的初始宽度为0，并设置了过渡效果，以便在宽度变化时有一个平滑的动画效果。

三、使用JavaScript实现进度条的动态变化

最后，我们使用JavaScript来控制进度条的动态变化。这里我们需要通过事件监听来启动进度条，并通过定时器来更新进度条的宽度。

// script.js
document.getElementById('startButton').addEventListener('click', startProgress);
function startProgress() {
    const progressBar = document.getElementById('progressBar');
    let width = 0;
    const interval = setInterval(() => {
        if (width >= 100) {
            clearInterval(interval);
        } else {
            width++;
            progressBar.style.width = width + '%';
        }
    }, 100);
}

在这个JavaScript代码中，我们首先通过addEventListener为按钮添加了一个点击事件监听器。当按钮被点击时，startProgress函数被调用。在这个函数中，我们使用setInterval来每100毫秒更新一次进度条的宽度，直到宽度达到100%。

四、优化和扩展进度条功能

1、添加暂停和恢复功能

为了使进度条更为实用，我们可以添加暂停和恢复功能。在HTML中添加一个暂停/恢复按钮，并在JavaScript中实现相应的逻辑。

<button id="pauseButton">Pause</button>
<button id="resumeButton">Resume</button>

let interval;
let width = 0;
let isPaused = false;
document.getElementById('startButton').addEventListener('click', startProgress);
document.getElementById('pauseButton').addEventListener('click', pauseProgress);
document.getElementById('resumeButton').addEventListener('click', resumeProgress);
function startProgress() {
    if (interval) clearInterval(interval);
    interval = setInterval(() => {
        if (width >= 100 || isPaused) {
            clearInterval(interval);
        } else {
            width++;
            document.getElementById('progressBar').style.width = width + '%';
        }
    }, 100);
}
function pauseProgress() {
    isPaused = true;
}
function resumeProgress() {
    if (isPaused) {
        isPaused = false;
        startProgress();
    }
}

2、进度条颜色变化

我们可以通过JavaScript动态改变进度条的颜色，使其随着进度的变化而变化。

function startProgress() {
    if (interval) clearInterval(interval);
    interval = setInterval(() => {
        if (width >= 100 || isPaused) {
            clearInterval(interval);
        } else {
            width++;
            const progressBar = document.getElementById('progressBar');
            progressBar.style.width = width + '%';
            progressBar.style.backgroundColor = `rgb(${255 - 2.55 * width}, ${2.55 * width}, 0)`;
        }
    }, 100);
}

3、进度条文本显示

我们可以在进度条上显示当前的进度百分比。

<div class="progress-container">
    <div class="progress-bar" id="progressBar">
        <span id="progressText"></span>
    </div>
</div>

.progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

function startProgress() {
    if (interval) clearInterval(interval);
    interval = setInterval(() => {
        if (width >= 100 || isPaused) {
            clearInterval(interval);
        } else {
            width++;
            const progressBar = document.getElementById('progressBar');
            progressBar.style.width = width + '%';
            progressBar.style.backgroundColor = `rgb(${255 - 2.55 * width}, ${2.55 * width}, 0)`;
            document.getElementById('progressText').innerText = width + '%';
        }
    }, 100);
}

4、集成到项目管理系统

在项目管理系统中，进度条可以用于显示任务或项目的进展情况。推荐使用研发项目管理系统PingCode或通用项目协作软件Worktile来管理项目，并将进度条集成到这些系统中。

例如，在PingCode中，我们可以通过API获取任务的进度，并动态更新进度条：

async function fetchProgress(taskId) {
    const response = await fetch(`/api/tasks/${taskId}/progress`);
    const data = await response.json();
    return data.progress;
}
async function startProgress(taskId) {
    const progressBar = document.getElementById('progressBar');
    const progressText = document.getElementById('progressText');
    let width = await fetchProgress(taskId);
    progressBar.style.width = width + '%';
    progressText.innerText = width + '%';
}

这样，我们就可以实时显示任务的进度，并在任务进展时动态更新进度条。

通过以上步骤，我们可以使用原生JavaScript实现一个功能丰富的进度条，并将其集成到项目管理系统中，从而提升项目管理的可视化和易用性。