实现一个简单的进度条 (Progress Bar)

推荐答案

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Progress Bar</title>
    <style>
        .progress-container {
            width: 100%;
            height: 20px;
            background-color: #f3f3f3;
            border-radius: 10px;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            width: 0%;
            background-color: #4caf50;
            transition: width 0.5s ease;
        }
    </style>
</head>
<body>
    <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
    </div>

    <script>
        function updateProgressBar(percentage) {
            const progressBar = document.getElementById('progressBar');
            progressBar.style.width = percentage + '%';
        }

        // Example usage:
        let currentProgress = 0;
        const interval = setInterval(() => {
            currentProgress += 10;
            updateProgressBar(currentProgress);
            if (currentProgress >= 100) {
                clearInterval(interval);
            }
        }, 500);
    </script>
</body>
</html>

本题详细解读

1. HTML 结构

• <div class="progress-container">: 这是进度条的容器，设置了宽度、高度、背景颜色和圆角。
• <div class="progress-bar" id="progressBar">: 这是实际的进度条，初始宽度为0%，背景颜色为绿色。

2. CSS 样式

• .progress-container: 设置了进度条容器的样式，包括宽度、高度、背景颜色和圆角。overflow: hidden确保进度条不会超出容器。
• .progress-bar: 设置了进度条的样式，包括高度、初始宽度、背景颜色和过渡效果。transition: width 0.5s ease使得宽度变化时有平滑的过渡效果。

3. JavaScript 功能

• updateProgressBar(percentage): 这是一个函数，用于更新进度条的宽度。它接受一个百分比参数，并将进度条的宽度设置为该百分比。
• setInterval: 用于模拟进度条的更新。每500毫秒，进度增加10%，直到达到100%。

4. 示例用法

• 在示例中，currentProgress变量从0开始，每500毫秒增加10%，直到达到100%。每次更新时，调用updateProgressBar函数来更新进度条的宽度。

通过这个简单的实现，你可以创建一个动态的进度条，并且可以根据需要调整进度条的更新速度和样式。